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

Question

我正在用R构建可绘制的数字。这些数字都有图例。每个图例都有一个代表数据级别的彩色点。这是一个最小的示例：

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

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

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

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

• 在JS中编写自定义“点击事件”功能。 https://plotly.com/javascript/plotlyjs-events/#legend-click-events似乎暗示这种方法可行。我不知道我是否可以从R中实现这种方法。
• 禁用默认图例（showlegend = FALSE），然后通过添加具有自定义单击事件的跟踪来创建新图例。

这些是最佳方法吗？如果可以，并且有多个可行的方法，我应该追求哪一个？

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

Answer 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。