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

avascript 당신은 https://stackoverflow.com/questions/46157790/how-to-get-coordinates-from-a-r-plotly-figure 살펴 있었나요? –

안녕하세요 - 우수합니다. 저는 며칠 동안 인터넷 검색을 해왔지만 그 사실을 알지 못했습니다. 내가 시도 할 수있는 접근법을 줄 수있는 것처럼 보입니다. –

행운을 빈다! 어떻게 작동하는지 알려주십시오. –

많은 감사를 맥시 피터스이

지금 MouseMove 이벤트에 위치 (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>

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 클릭시 점을 생성

답변

관련 문제