Plotly.js 在点击时创建一个点

2023-09-30前端开发问题

本文介绍了Plotly.js 在点击时创建一个点的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着跟版网的小编来一起学习吧！

问题描述

有问题.使用 plotly.js 绘制散点图，我需要能够点击图表并检索点的值，以便我可以在点击的位置绘制一个新点.plotly_click 事件仅在已创建的点上触发.

Having an issue. Using plotly.js to draw a scatter chart, I need to be able to click on the chart and retrieve the values of the point so that I can draw a new point at the clicked location. The plotly_click event only fires on already created points.

任何想法如何获得点击事件以从该位置获取当前值以便绘制新点?

Any ideas how I can get a click event to get the current values from the location so I can plot the new point?

到目前为止，我只得到这个:

So far I'm only getting this:

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 +'
y = ' + data.points[i].y.toPrecision(4) + '

';
    }

    alert('Closest point clicked:

'+pts);
});

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

推荐答案

非常感谢 Maximillian Peters 的这个

Many thanks to Maximillian Peters for this

现在有一个散点图，它报告鼠标移动时的位置 (xy) 值，并在点击时在图表上绘制一个点

Now have a scatter graph that reports location (xy) value on mousemove and plots a point to the chart on click

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

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

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

这篇关于Plotly.js 在点击时创建一个点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持跟版网！

The End

相关推荐

js删除数组中指定元素的5种方法

layui tree树组件怎么自定义添加图标

JavaScript小数运算出现多位的解决办法

JavaScript(js)文件字符串中丢失＂\＂斜线的解决方法

layui中table列表增加属性 edit=＂date＂，不生效怎么办？

Rails/Javascript:如何将 rails 变量注入(非常)简单的 javascript

热门文章

热门精品源码

最新VIP资源