最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Plotly.js hover across multiple subplots - Stack Overflow

programmeradmin0浏览0评论

I have a plotly.js graph with multiple subplots that share an x-axis as in

I'm trying to hover across all of the subplots so that the values of all of the points with the same x value are displayed at once.

I've attempted to solve this by calling Plotly.Fx.hover on each subplot, but it only seems to take effect for the last subplot on which it is called.

The code I tried is:

Plotly.Fx.hover('myDiv', {xval: 2, curveNumber: 0}, "xy")
Plotly.Fx.hover('myDiv', {xval: 2, curveNumber: 1}, "xy2")

Ideally the API would be such that I could do this in a single call:

Plotly.Fx.hover('myDiv', [{xval: 2, curveNumber: 0, subplot: "xy"}, {xval: 2, curveNumber: 1, subplot: "xy2"}])

Any thoughts on how to get this to work?

I have a plotly.js graph with multiple subplots that share an x-axis as in https://plot.ly/javascript/subplots/#stacked-subplots-with-a-shared-x-axis

I'm trying to hover across all of the subplots so that the values of all of the points with the same x value are displayed at once.

I've attempted to solve this by calling Plotly.Fx.hover on each subplot, but it only seems to take effect for the last subplot on which it is called. http://codepen.io/john-soklaski/pen/adQwBa

The code I tried is:

Plotly.Fx.hover('myDiv', {xval: 2, curveNumber: 0}, "xy")
Plotly.Fx.hover('myDiv', {xval: 2, curveNumber: 1}, "xy2")

Ideally the API would be such that I could do this in a single call:

Plotly.Fx.hover('myDiv', [{xval: 2, curveNumber: 0, subplot: "xy"}, {xval: 2, curveNumber: 1, subplot: "xy2"}])

Any thoughts on how to get this to work?

Share Improve this question asked Feb 9, 2016 at 0:12 John SoklaskiJohn Soklaski 1011 silver badge5 bronze badges
Add a ment  | 

3 Answers 3

Reset to default 1

I see this question is old, but this functionality has been added: https://github./plotly/plotly.js/pull/301

Plotly.plot('myDiv', data, layout);
graph = document.getElementById('myDiv');
graph.on('plotly_hover', function(eventdata) {
    if (eventdata.xvals) {
        Plotly.Fx.hover(graph, {
            xval: eventdata.xvals[0]
        }, ['xy', 'x2y2', 'x3y3', 'x4y4']);
    }
});

For multiple subplots add the axis labels array also. In this case

['xy', 'x2y2', 'x3y3', 'x4y4']

In this way you can get coupled hover events for subplots in a div

You'll have to pass the visible subplots as the third arg to Plotly.Fx.hover func.

This worked for me:

chartContainer.current.on('plotly_hover', function () {
  var points = eventdata.points[0]
  var pointNum = points.pointNumber
  Plotly.Fx.hover(
    chartContainer.current,
    props.data.map((_, i) => ({
      curveNumber: i,
      pointNumber: pointNum
    })),
    Object.keys((chartContainer.current)._fullLayout._plots))
})

chartContainer.current is the div here.

Object.keys((chartContainer.current)._fullLayout._plots) will return the visible plots, for example: ['xy', 'xy2'...]

发布评论

评论列表(0)

  1. 暂无评论