Início / coding / Perguntas / 79598128
Accepted
thothal
Asked: 2025-04-29 18:20:40 +0800 CST

O marcador individual.line nem sempre é refletido na legenda

  • 772

Aviso legal. Estou trabalhando com R, mas a pergunta é, na verdade, uma pergunta geral plotly(só que sou mais rápido gerando um gráfico em JavaScript Rdo que em JavaScript puro).

Tenho o seguinte código, que adiciona uma borda ao redor da barra ao passar o mouse. Funciona como esperado, MAS a legenda só muda se eu passar o mouse sobre (e, portanto, bordar) a primeira barra do traço.

Gostaria que ela não mudasse nada (solução preferida) ou que a borda fosse adicionada à legenda, independentemente de qual barra do traço eu estiver passando o mouse.

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 respostas

  1. Best Answer

    Se você inspecionar os caminhos da legenda enquanto passa o mouse sobre os traços, poderá ver que o style.strokeWidth muda se você passar o mouse sobre as primeiras barras do traço. Ele muda o strokeWidth para 2px, o que não queremos!

    fora1

    então tudo o que temos que fazer é forçar isso style.strokeWidth = '0px';do legend.elements (com class="legendundefined") em plotly.hover:

    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';
      });
   });
  }")

    dando

    fora2

    • 1

relate perguntas