主页 / coding / 问题 / 79598128
Accepted
thothal
Asked: 2025-04-29 18:20:40 +0800 CST

单个标记线并不总是反映在图例中

  • 772

免责声明。我正在处理这个问题R，但这个问题实际上是一个一般性问题（我只是比在 vanilla JS 中plotly生成图表更快）。R

我有以下代码，它在鼠标悬停时在条形图周围添加边框。这按预期工作，但是只有当我将鼠标悬停在轨迹的第一个条形图上（并因此成为边框）时，图例才会更改。

我希望它根本不改变（首选解决方案），或者无论我将鼠标悬停在轨迹的哪个栏上，都会将边框添加到图例中。

library(plotly)
library(htmlwidgets)
set.seed(29042025)
d <- expand.grid(a = LETTERS[1:3], b = letters[1:2])
d$c <- sample(10, 6)

plot_ly(d) %>%
  add_bars(x = ~ c, y = ~ a, color = ~ b) %>%
  onRender("function(el, x) {
   el.on('plotly_hover', function(data){
     const color = Array(3).fill('undefined');
     const width = Array(3).fill('undefined');
     const pos = data.points[0].pointNumber;
     color[pos] = 'black';
     width[pos] = 2;
     Plotly.restyle(el, {'marker.line': null});
     Plotly.restyle(el, {'marker.line.color': [color], 'marker.line.width': [width]}, [data.points[0].curveNumber]);
   });
  }")

1 个回答

  1. Best Answer

    如果将鼠标悬停在轨迹上并检查图例路径，您会发现，如果将鼠标悬停在轨迹的第一个条上，style.strokeWidth 会发生变化。它会将 strokeWidth 更改为 2px，这是我们不想要的！

    输出1

    因此，我们所要做的就是style.strokeWidth = '0px';在 plotly.hover 上强制使用 legend.elements（带有 class="legendundefined"）：

    library(plotly)
library(htmlwidgets)
set.seed(29042025)
d <- expand.grid(a = LETTERS[1:3], b = letters[1:2])
d$c <- sample(10, 6)

plot_ly(d) %>%
  add_bars(x = ~ c, y = ~ a, color = ~ b) %>%
  onRender("function(el, x) {
   el.on('plotly_hover', function(data){
     const color = Array(3).fill('undefined');
     const width = Array(3).fill('undefined');
     const pos = data.points[0].pointNumber;
     color[pos] = 'black';
     width[pos] = 2;
     Plotly.restyle(el, {'marker.line': null});
     Plotly.restyle(el, {'marker.line.color': [color], 'marker.line.width': [width]}, [data.points[0].curveNumber]);
     el.querySelectorAll('.legendundefined').forEach((element) => {
        element.style.strokeWidth = '0px';
      });
   });
  }")

    给予

    输出2

    • 1

相关问题