plotly:单击图例中的点时，突出显示(暗淡)而不是过滤 [英] plotly: highlight (dim), rather than filter, when clicking on point in legend

问题描述

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

I am building plotly figures with R. The figures have legends. Each legend has a colored point that represents a level of the data. Here is a minimal example:

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

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

By default, double-clicking on a point in the legend completely hides all unrelated points. For example, double-clicking on the "versicolor" point in the legend hides all "setosa" and "virginica" points in the plot. In plotly argot, it "filters" the data in the plot.

但是我宁愿单击图例中图例 highlight 点中的一个点.例如，我想单击(或双击)图例中的杂色点，以使绘图中的"setosa"和"virginica"点变暗，也许是通过降低它们的不透明度来实现.图中的杂色点将被突出显示".可以实施这种行为吗?

But I would rather that clicking on a point in the legend highlight points in the plot. For example, I would like clicking (or double-clicking) on the versicolor point in the legend to dim the "setosa" and "virginica" points in the plot, perhaps by reducing their opacity. The versicolor points in the plot would then be "highlighted." Can this behavior be implemented?

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

I've read through the plotly documentation and searched SO and the plotly forums for related questions. That search suggests two potential solutions, but they seem rather complicated:

• 在JS中编写自定义点击事件"功能. https://plotly.com/javascript/plotlyjs-events/#legend-点击事件似乎表明这种方法可以奏效.我不知道我是否可以从R中实施这种方法.

• Write a custom "click event" function in JS. https://plotly.com/javascript/plotlyjs-events/#legend-click-events seems to suggest that this approach can work. I don't know whether I can implement this approach from R.

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

Disable the default legend (showlegend = FALSE), then create a new legend by adding traces that have customized click events.

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

Are these the best approaches? If they are, and if more than one is workable, which one should I pursue?

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

Other notes: I'm not using Shiny. And I know about the itemclick and itemdoubleclick legend attributes, and about highlight_key(), but they don't seem relevant. (Please correct me if I'm wrong.)

推荐答案

关键是禁用R中的图例单击事件，然后编写一个自定义事件处理程序，以在 plotly_legendclick 时更改图形被触发.这是一个示例:

The key is to disable legend-click events in R, and then to write a custom event handler that changes the figure when plotly_legendclick is triggered. Here is an example:

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

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

When a user clicks on a legend bubble, this code toggles the corresponding bubbles in the plot between "normal" and "dim" states.

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

To instead toggle the other bubbles in the plot -- that is, to modify the other traces -- a small modification will be needed. In particular, data.curveNumber is always the number of the trace that corresponds to the clicked bubble in the legend. To instead modify the other traces, we need to pass the other trace numbers to Plotly.restyle(), not the trace that is indexed by data.curveNumber. See the Plotly.restyle() documentation for more on this point.

这篇关于plotly:单击图例中的点时，突出显示(暗淡)而不是过滤的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！