Question

下面是document of plotly.js dealing with click events

中的代码

var myPlot = document.getElementById('myDiv'),
    d3 = Plotly.d3,
    N = 16,
    x = d3.range(N),
    y = d3.range(N).map( d3.random.normal() ),
    data = [ { x:x, y:y, type:'scatter',
            mode:'markers', marker:{size:16} } ],
    layout = {
        hovermode:'closest',
        title:'Click on Points'
     };

Plotly.newPlot('myDiv', data, layout);

myPlot.on('plotly_click', function(data){
    var pts = '';
    for(var i=0; i < data.points.length; i++){
        pts = 'x = '+data.points[i].x +'\ny = '+
            data.points[i].y.toPrecision(4) + '\n\n';
    }
    alert('Closest point clicked:\n\n'+pts);
});

通过plotly_click事件，我可以通过点值x和y访问数据。但我想得到的不是其他领域。假设我以适当的方式更改上述数据plotly.js为

var N = 5,
    x = d3.range(N),
    y = d3.range(N).map( d3.random.normal() ),
    text = d3.range(N).map( function() {return "hello";} ),
    data = [ {x: x, y: y, text: text, type:"scatter", mode: "markers"} ];

在这种情况下，有没有办法在text事件中访问plotly_click属性？基本上我想打开包含附加信息的网址的新标签页（例如text字段）。

此外，我徘徊如何使用隐藏字段（text除外）创建数据，以便在悬停时使用text作为工具提示，为click事件使用其他字段。提前谢谢。

Answer 1

您可以通过d的{{1}}访问与点击事件相关的数据。

点击点的索引可以通过function(d)检索。

d.points[0].pointNumber和d.points[0].fullData将您的文字包含在数组中。

d.points[0].data包含其他属性（例如下面代码段中的d.points[0].data）。

＆＃13;

freetext

＆＃13;

var myPlot = document.getElementById('myDiv');
var x = [0, 1, 2];
var y = [0, 1, 0];
var text = ['one', 'two', 'three'];
var freetext = ['One Is a Lonely Number', 'two is better than one', 'three is a lucky number'];
var data = [{x: x,
        y: y,
        text: text,
        freetext: freetext,
        type: 'scatter',
        mode: 'markers',
        marker: {size: 64}}];

Plotly.newPlot('myDiv', data);

myPlot.on('plotly_click', function (d) {
    window.alert('Here is the text associated with your point:\n' + d.points[0].data.text[d.points[0].pointNumber] + '\n\nbut you can also get any other info as well:\n' + d.points[0].data.freetext[d.points[0].pointNumber]);
});

＆＃13;

plotly.js：如何在click事件中访问x，y以外的数据

1 个答案: