Plotly.js創建一個點擊

有問題。使用plotly.js繪製散點圖，我需要能夠點擊圖表並檢索點的值，以便在點擊的位置繪製新點。 plotly_click事件僅在已創建的點上觸發。Plotly.js創建一個點擊

任何想法如何獲得點擊事件從位置獲取當前值，以便我可以繪製新點？

到目前爲止，我只得到這個：

var trace1 = { 
    x: [1, 2, 3, 4], 
    y: [10, 15, 13, 17], 
    mode: 'markers', 
    type: 'scatter' 
}; 

var trace2 = { 
    x: [2, 3, 4, 5], 
    y: [16, 5, 11, 9], 
    mode: 'lines', 
    type: 'scatter' 
}; 

var trace3 = { 
    x: [1, 2, 3, 4], 
    y: [12, 9, 15, 12], 
    mode: 'lines+markers', 
    type: 'scatter' 
}; 

var data = [trace1, trace2, trace3]; 

Plotly.newPlot('myDiv', data); 

document.getElementById('myDiv').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); 
});

https://codepen.io/mayasky76/pen/ZXRRMJ/

來源

2017-10-11 Iain Wood

你看看https://stackoverflow.com/questions/46157790/how-to-get-coordinates-from-a-r-plotly-figure？ –

嗨 - 非常好 - 我一直在Google上搜索幾天，但沒有遇到這種情況。看起來它可能會給我一個我可以嘗試的方法。 –

祝你好運！讓我們知道它是如何工作的。 –

非常感謝馬克西米利彼得斯這個

現在擁有的分佈圖上鼠標移動的報告位置（XY）值並在點擊圖上指向圖表

<head> 
    <!-- Plotly.js --> 
    <script src="https://cdn.plot.ly/plotly-latest.min.js"></script> 
</head> 

<body> 
    x :<input id="xvalue" size="5" /> y :<input id="yvalue" size="5" /> 
<div id="myPlot" style="width:100%;height:100%"></div> 
    <script> 
    <!-- JAVASCRIPT CODE GOES HERE --> 
    </script> 
</body>

J avascript

var traces = [{ 
    x: [1, 2, 3, 4], 
    y: [10, 15, 13, 17], 
    mode: 'markers', 
    type: 'scatter' 
}]; 

traces.push({ 
    x: [2, 3, 4, 5], 
    y: [16, 5, 11, 9], 
    mode: 'markers', 
    type: 'scatter' 
}); 

traces.push({ 
    x: [1, 2, 3, 4], 
    y: [12, 9, 15, 12], 
    mode: 'markers', 
    type: 'scatter' 
}); 

traces.push({ 
    x: [], 
    y: [], 
    mode: 'markers', 
    type: 'scatter' 
}); 

var myPlot = document.getElementById('myPlot') 
Plotly.newPlot('myPlot', traces, {hovermode: 'closest'}); 

Number.prototype.between = function(min, max) { 
    return this >= min && this <= max; 
}; 


Plotly.d3.select(".plotly").on('click', function(d, i) { 
    var e = Plotly.d3.event; 
    var bg = document.getElementsByClassName('bg')[0]; 
    var x = ((e.layerX - bg.attributes['x'].value + 4)/(bg.attributes['width'].value)) * (myPlot.layout.xaxis.range[1] - myPlot.layout.xaxis.range[0]) + myPlot.layout.xaxis.range[0]; 
    var y = ((e.layerY - bg.attributes['y'].value + 4)/(bg.attributes['height'].value)) * (myPlot.layout.yaxis.range[0] - myPlot.layout.yaxis.range[1]) + myPlot.layout.yaxis.range[1] 
    if (x.between(myPlot.layout.xaxis.range[0], myPlot.layout.xaxis.range[1]) && 
    y.between(myPlot.layout.yaxis.range[0], myPlot.layout.yaxis.range[1])) { 
    Plotly.extendTraces(myPlot, { 
     x: [ 
     [x] 
     ], 
     y: [ 
     [y] 
     ] 
    }, [3]); 
    } 
}); 

Plotly.d3.select(".plotly").on('mousemove', function(d, i) { 
    var e = Plotly.d3.event; 
    var bg = document.getElementsByClassName('bg')[0]; 
    var x = ((e.layerX - bg.attributes['x'].value + 4)/(bg.attributes['width'].value)) * (myPlot.layout.xaxis.range[1] - myPlot.layout.xaxis.range[0]) + myPlot.layout.xaxis.range[0]; 
    var y = ((e.layerY - bg.attributes['y'].value + 4)/(bg.attributes['height'].value)) * (myPlot.layout.yaxis.range[0] - myPlot.layout.yaxis.range[1]) + myPlot.layout.yaxis.range[1] 
    if (x.between(myPlot.layout.xaxis.range[0], myPlot.layout.xaxis.range[1]) && 
    y.between(myPlot.layout.yaxis.range[0], myPlot.layout.yaxis.range[1])) { 
    console.log("Location X:"+x+" Y"+y) 
    document.getElementById("xvalue").value = x; 
    document.getElementById("yvalue").value = y; 
    } 
});

https://codepen.io/mayasky76/pen/ZXRRMJ

來源

2017-10-12 09:21:38

Plotly.js創建一個點擊

回答

相關問題