Plotly.jsクリックでポイントを作成

問題があります。 plotly.jsを使用して散布図を描画するには、クリックした場所に新しい点を描画できるように、グラフをクリックして点の値を取得できる必要があります。 plotly_clickイベントは既に作成されたポイントでのみ発生します。Plotly.jsクリックでポイントを作成

クリックイベントを取得して現在の値を取得できるので、新しいポイントをプロットすることができます。

これまでのところ、私はこれだけ取得しています：この

ためのマクシミリアン・ピーターズへの感謝は今のMouseMove上の位置を報告する散布図（XY）の値を持つ

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

avascriptあなたはhttps://stackoverflow.com/questions/46157790/how-to-get-coordinates-from-a-r-plotly-figureを見ていましたか？ –

こんにちは - 私は数日間離れてグーグルグーグルであり、それを見ていない。それは私に試すことができるアプローチを与えるかもしれないように見えます。 –

幸運を祈る！どのように動作するか教えてください。 –

をクリック時のチャートにポイントをプロットする

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

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クリックでポイントを作成

答えて

関連する問題