Plotly悬停框文本左对齐及完整显示问题解决

针对长文本在悬停框中显示不全、无法左对齐的问题，推荐两种实用调整方式：

方法1：通过HTML标签控制文本样式 #

Plotly悬停文本支持HTML语法，用<div>标签给内容设置左对齐和固定宽度，让文本自动换行完整展示：

text = ~paste('<div style="text-align:left; width:450px;">',
              "<b>Title:</b> ", title,
              "<br><b>Publication Date:</b> ", publicationDate,
              "<br><b>Influential Citation Count:</b> ", influentialCitationCount,
              "<br><b>TLDR:</b> ", tldr,
              '</div>')

方法2：通过hoverlabel参数全局配置 #

在layout中直接设置悬停框的对齐方式和宽度，无需修改文本内容，更简洁：

layout(
  title = "3D Scatter Plot with Wrapped Title and Custom Popup by Date",
  scene = list(
    xaxis = list(title = "X Axis"),
    yaxis = list(title = "Y Axis"),
    zaxis = list(title = "Z Axis")
  ),
  hoverlabel = list(align = "left", width = 450, bgcolor = "white") # 新增配置
)

修改后的完整代码 #

整合方法2的完整实现（推荐使用，配置更集中）：

library(plotly)
df2<-structure(list(publicationDate = structure(c(18262, 18262, 18262
), class = "Date"), x = c(10.943317, 11.376795, 11.11172), y = c(5.915477, 
                                                                 7.448679, 6.8502655), z = c(8.941429, 9.370003, 4.6556673), influentialCitationCount = c(65.8153241650295, 
                                                                                                                                                          65.8153241650295, 19.5902329497614), tldr = c("This survey focuses on the detailed representation of the BERT- based technique for word embedding, its architecture, and the importance of this model for pre-training purposes using a large corpus.", 
                                                                                                                                                                                                        "This work introduces an algorithm that removes units and layers of a neural network while not changing the output that is produced, which thus implies a lossless compression.", 
                                                                                                                                                                                                        "This article aims at addressing this limitation by applying a semiformal boilerplates (BPs) model of functional requirements originally presented in informal natural language to formulate smart grid requirements and demonstrating how functional requirements can be translated to IEC 61499 control codes using MDE to autogenerate an IEC61499 protection and control system with structure and control flow."
                                                                                                                                                          ), title = c("A Multi-layer Bidirectional Transformer Encoder for Pre-trained Word Embedding: A Survey of BERT", 
                                                                                                                                                                       "Lossless Compression of Deep Neural Networks", "Automatic Generation of Control Flow From Requirements for Distributed Smart Grid Automation Control"
                                                                                                                                                          )), row.names = c(472L, 782L, 937L), class = "data.frame")

# 创建3D散点图并配置悬停框
scatter3Dplot <- plot_ly(data = df2, x = ~x, y = ~y, z = ~z, color = ~publicationDate,
                         type = "scatter3d", mode = "markers",
                         marker = list(size = 3),
                         text = ~paste("<b>Title:</b> ", title,
                                       "<br><b>Publication Date:</b> ", publicationDate,
                                       "<br><b>Influential Citation Count:</b> ", influentialCitationCount,
                                       "<br><b>TLDR:</b> ", tldr),
                         hoverinfo = "text") %>%
  layout(title = "3D Scatter Plot with Wrapped Title and Custom Popup by Date",
         scene = list(
           xaxis = list(title = "X Axis"),
           yaxis = list(title = "Y Axis"),
           zaxis = list(title = "Z Axis")
         ),
         hoverlabel = list(align = "left", width = 450, bgcolor = "white")) %>%
  layout(legend = list(orientation = "h"),
         showlegend = FALSE)

scatter3Dplot

你可以根据文本实际长度调整width的数值（比如400、500），找到最合适的显示效果。调整后悬停框会自动拉长，文本左对齐并完整换行，不会再出现截断。

内容的提问来源于stack exchange，提问作者firmo23