plotly：单击图例中的点时突出显示（暗淡），而不是过滤

Posted 2023-02-16

【中文标题】plotly：单击图例中的点时突出显示（暗淡），而不是过滤

【英文标题】：plotly: highlight (dim), rather than filter, when clicking on point in legend

【发布时间】：2020-08-27 04:29:30

【问题描述】：

我正在用 R 构建情节人物。这些人物有传说。每个图例都有一个代表数据级别的彩色点。这是一个最小的例子：

library(plotly)
data(iris)
plot_ly(
  x     = ~Petal.Length, y = ~Petal.Width, 
  color = ~Species,
  data  = iris)

默认情况下，双击图例中的一个点会完全隐藏所有不相关的点。例如，双击图例中的“versicolor”点会隐藏图中的所有“setosa”和“virginica”点。在 plotly arggot 中，它“过滤”了图中的数据。

但我宁愿点击图例中的一个点突出显示情节中的点。例如，我想单击（或双击）图例中的杂色点以使绘图中的“setosa”和“virginica”点变暗，也许是通过降低它们的不透明度。情节中的杂色点将被“突出显示”。这种行为可以实现吗？

我已通读 plotly 文档，并在 SO 和 plotly 论坛中搜索相关问题。该搜索提出了两种潜在的解决方案，但它们似乎相当复杂：

在 JS 中编写一个自定义的“点击事件”函数。 https://plotly.com/javascript/plotlyjs-events/#legend-click-events 似乎表明这种方法可行。我不知道我是否可以从 R 中实现这种方法。

禁用默认图例 (showlegend = FALSE)，然后通过添加具有自定义点击事件的跟踪来创建新图例。

这些是最好的方法吗？如果是，并且如果不止一个是可行的，我应该追求哪一个？

其他说明：我没有使用 Shiny。我知道itemclick 和itemdoubleclick 传奇属性，以及highlight_key()，但它们似乎并不相关。 （如果我错了，请纠正我。）

【参考方案1】：

关键是在R中禁用图例点击事件，然后编写一个自定义事件处理程序，当plotly_legendclick被触发时改变图形。这是一个例子：

library(plotly)
data(iris)
myPlot <- plot_ly(
  x     = ~Petal.Length, y = ~Petal.Width, 
  color = ~Species,
  data  = iris)

# Disable default click-on-legend behavior
myPlot <- layout(
  myPlot, 
  legend = list(itemclick = FALSE, itemdoubleclick = FALSE))

# Add an event handler
onRender(
  myPlot,
  "function (el) 
    const OPACITY_START = el._fullData[0].marker.opacity;
    const OPACITY_DIM   = 0.3;
    el.on('plotly_legendclick', function (data) 

      // Get current opacity. The legend bubble on which we click is given by 
      // data.curveNumber: data.curveNumber == 0 means that we clicked on the 
      // first bubble, 1 means that we clicked on the second bubble, and so on.
      var currentOpacity = data.fullData[data.curveNumber].marker.opacity

      if (currentOpacity < OPACITY_START)                  // if points already dimmed
        var update =  'marker.opacity' : OPACITY_START ;    // could also set to null
       else                                               // if points not already dimmed
        var update =  'marker.opacity' : OPACITY_DIM ; 
      

      Plotly.restyle(el, update, data.curveNumber);
         );
    "
)

当用户单击图例气泡时，此代码会在图中的“正常”和“暗淡”状态之间切换相应的气泡。

要改为切换图中的 other 气泡 - 即修改其他轨迹 - 需要进行小修改。特别是，data.curveNumber 始终是对应于图例中单击的气泡的跟踪编号。要改为修改其他跟踪，我们需要将其他跟踪号传递给Plotly.restyle()，而不是由data.curveNumber 索引的跟踪。有关这一点的更多信息，请参阅Plotly.restyle() documentation。

【讨论】：

能否请您添加如何使未点击的那些变暗？