Javascript Plotly.js单击创建点_Javascript_Plotly

Javascript Plotly.js单击创建点

javascript

Javascript Plotly.js单击创建点,javascript,plotly,Javascript,Plotly,有问题。使用plotly.js绘制散点图时，我需要能够单击图表并检索点的值，以便在单击的位置绘制新点。plotly_click事件仅在已创建的点上激发你知道如何通过点击事件从该位置获取当前值，从而绘制新点吗到目前为止，我只知道： var trace1 = { x: [1, 2, 3, 4], y: [10, 15, 13, 17], mode: 'markers', type: 'scatter' }; var trace2 = { x: [2, 3

有问题。使用plotly.js绘制散点图时，我需要能够单击图表并检索点的值，以便在单击的位置绘制新点。

plotly_click

事件仅在已创建的点上激发

你知道如何通过点击事件从该位置获取当前值，从而绘制新点吗

到目前为止，我只知道：

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);
});

var trace1={
x:[1,2,3,4]，
y:[10,15,13,17]，
模式：'标记'，
键入：“散布”
};
变量trace2={
x:[2,3,4,5]，
y:[16,5,11,9]，
模式：“行”，
键入：“散布”
};
变量trace3={
x:[1,2,3,4]，
y:[12,9,15,12]，
模式：“行+标记”，
键入：“散布”
};
var数据=[trace1，trace2，trace3]；
Plotly.newPlot（'myDiv'，数据）；
document.getElementById（'myDiv'）。on（'plotly_click'，函数（数据）{
var-pts=''；
对于（变量i=0；i


非常感谢马克西米利安·彼得斯的帮助
现在有一个散点图，在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>


x:y:

Javascript
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;
  }
});

var跟踪=[{
x:[1,2,3,4]，
y:[10,15,13,17]，
模式：'标记'，
键入：“散布”
}];
推({
x:[2,3,4,5]，
y:[16,5,11,9]，
模式：'标记'，
键入：“散布”
});
推({
x:[1,2,3,4]，
y:[12,9,15,12]，
模式：'标记'，
键入：“散布”
});
推({
x:[]，
y:[]，
模式：'标记'，
键入：“散布”
});
var myPlot=document.getElementById（'myPlot'）
newPlot（'myPlot'，traces，{hovermode:'nestest'}）；
Number.prototype.between=函数（最小值、最大值）{
return this>=min&&你看了吗？嗨-太好了-我已经在谷歌上搜索了几天，没有发现这个问题。看起来它可能会给我一个我可以尝试的方法。祝你好运！让我们知道它是如何工作的。给定的链接似乎过期了。这是一个新的链接，我无法复制它的行为。到目前为止，我只看到了这个当鼠标悬停在plotly工具箱上时，e x，y值会发生变化