javascript 我试图画直线鼠标点击plotyjs与图像加载为背景

jk9hmnmh  于 2023-06-20  发布在  Java
关注(0)|答案(1)|浏览(123)

我试图画一条直线上的鼠标点击plotlyjs与图像加载为背景。我能够得到坐标,但不能在连续的鼠标点击上画线。
在myPlot.on('plotly_click',function(data){ // some code })的帮助下,我能够获得坐标,但不知道如何在鼠标单击时绘制线条。任何想法或参考都会有帮助。先谢谢你了。this is the output of the plotly graph with background image

<script src='https://cdn.plot.ly/plotly-2.16.1.min.js'></script>
<div id='plotlyContainer'></div>
var d3 = Plotly.d3;
var imgWidth = 0;
var imgHeight = 0;
const imgs = new Image();
let plotCon  = document.getElementById('plotlyContainer');

imgs.onload = function() {
  imgWidth = this.width;
  imgHeight = this.height;  
  loadImgGraph(imgWidth, imgHeight);  
}
imgs.src = 'https://i.stack.imgur.com/cRbua.png';

function loadImgGraph(imgWidth, imgHeight) {
  var data = [
    {
      x: [],
      y: [],
      type: 'scatter'
    }
  ];
  var layout = {
    autosize: false,
    width: imgWidth,
    height: imgHeight,  
    xaxis: {range: [0, 100], dtick: 25, ticks: 'outside', tickwidth: 2, gridcolor: "black", gridwidth: 2, mirror: true, linecolor: 'black', linewidth: 1},
    yaxis: {range: [140, 0], dtick: 20, ticks: 'outside', tickwidth: 2, gridcolor: "black", gridwidth: 2, mirror: true, linecolor: 'black', linewidth: 1},
    margin: {
      l: 32,
      r: 20,
      b: 30,
      t: 30
    },
    images: [
          {
              source: 'https://i.stack.imgur.com/cRbua.png',              
              xref: 'paper',
              yref: 'paper',
              x: 0,
              y: 1,
              sizex: 1,
              sizey: 1,
              sizing: 'fill',
              opacity: 1,
              layer: 'below'
          }
        ],
  };
  Plotly.newPlot('plotlyContainer', data, layout).then(clickEv);

  function clickEv() {
    var xaxis = plotCon._fullLayout.xaxis;
    console.log('xaxis',xaxis);
    var yaxis = plotCon._fullLayout.yaxis;
    console.log('yaxis',yaxis);
    var l = plotCon._fullLayout.margin.l;
    console.log('l',l);
    var t = plotCon._fullLayout.margin.t;
    console.log('t',t);
    
    plotCon.addEventListener('mousemove', function(evt) {
      var xInDataCoord = xaxis.p2c(evt.x - l);
      var yInDataCoord = yaxis.p2c(evt.y - t);
      
      Plotly.relayout(plotCon, 'title', ['x: ' + xInDataCoord, 'y : ' + yInDataCoord].join('<br>'));
    });
    
    plotCon.on('plotly_click', function(){
      alert('You clicked this Plotly chart!');
    });
  }
}
pengsaosao

pengsaosao1#

在您的设置中,一种方法可以是:

plotCon.addEventListener('click', function(evt){
    data[0].x.push(xaxis.p2c(evt.x - l))
    data[0].y.push(yaxis.p2c(evt.y - t))
    Plotly.update(plotCon, data, layout);
});

此外,请参见Plotly.react以获得更新图的更有效方法。

相关问题