javascript - plotly.js:当悬停模式为 x/y 并且不是 'closest' 时，如何获取被单击的最近点

Question

看下面的例子，

Plotly.newPlot(
   'myDiv',
   [{x: [1, 2], y: [2, 3]}, {x: [2, 1], y: [1, 2.5]}]);

var myPlot = document.getElementById('myDiv');

myPlot.on('plotly_click', function(data){
    var point = data.points[0];
    var newAnnotation = {
        x: point.xaxis.d2l(point.x),
        y: point.yaxis.d2l(point.y),
        arrowhead: 6,
        ax: 0,
        ay: -80,
        bgcolor: 'rgba(255, 255, 255, 0.9)',
        arrowcolor: point.fullData.marker.color,
        font: {size:12},
        bordercolor: point.fullData.marker.color,
        borderwidth: 3,
        borderpad: 4,
        text: 'An annotation!'},
    divid = document.getElementById('myDiv'),
    newIndex = (divid.layout.annotations || []).length;

     // delete instead if clicked twice
    if(newIndex) {
       var foundCopy = false;
       divid.layout.annotations.forEach(function(ann, sameIndex) {
         if(ann.text === newAnnotation.text ) {
           Plotly.relayout('myDiv', 'annotations[' + sameIndex + ']', 'remove');
           foundCopy = true;
         }
       });
       if(foundCopy) return;
     }

     Plotly.relayout('myDiv', 'annotations[' + newIndex + ']', newAnnotation);
  })
  .on('plotly_clickannotation', function(event, data) {
    Plotly.relayout('myDiv', 'annotations[' + data.index + ']', 'remove');
  });

<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<div id="myDiv" style="width:500px; height:600px;"></div>
<div id="debug"></div>

我希望将悬停模式设置为默认值 x，以显示该 xaxis 点处所有其他点的悬停标签，但是当我单击某个点时，我想创建一个注释 在这一点上，但我似乎找不到办法。

(如果将clickmode设置为select，情况类似，它只会选择第一个可用的点，而不是实际最接近点击的点。

Answer 1

使用以下链接的引用代码在点击时添加注释，我能够生成以下解决方案。

Add Annotations on click

下面一行

hovertemplate: 'x: %{x}'

将确保显示所有点的 x 轴数据。

这是唯一的重大更改，x 和 y 轴值使用上述示例中的线，请查看此解决方案并告诉我它是否对您有帮助!

Plotly.newPlot(
  'myDiv', [{
    x: [1, 2],
    y: [2, 3],
    hovertemplate: 'x: %{x}'
  }, {
    x: [2, 1],
    y: [1, 2.5],
    hovertemplate: 'x: %{x}'
  }], {
    hovermode: 'closest',
    title: 'Click on Points to add an Annotation on it'
  });

var myPlot = document.getElementById('myDiv');

myPlot.on('plotly_click', function(data) {
    var point = data.points[0];
    var pts = '';
    var annotations = [];
    for (var i = 0; i < data.points.length; i++) {
      var newAnnotation = {
        x: data.points[i].x,
        y: parseFloat(data.points[i].y.toPrecision(4)),
        arrowhead: 6,
        ax: 0,
        ay: -80,
        bgcolor: 'rgba(255, 255, 255, 0.9)',
        arrowcolor: point.fullData.marker.color,
        font: {
          size: 12
        },
        bordercolor: point.fullData.marker.color,
        borderwidth: 3,
        borderpad: 4,
        text: 'An annotation!'
      };
    newIndex = (myPlot.layout.annotations || []).length;

      // delete instead if clicked twice
      if (newIndex) {
        var foundCopy = false;
        myPlot.layout.annotations.forEach(function(ann, sameIndex) {
          if (ann.text === newAnnotation.text) {
            Plotly.relayout('myDiv', 'annotations[' + sameIndex + ']', 'remove');
            foundCopy = true;
          }
        });
        if (foundCopy) return;
      }

     Plotly.relayout('myDiv', 'annotations[' + newIndex + ']', newAnnotation);
    }
  })
  .on('plotly_clickannotation', function(event, data) {
    Plotly.relayout('myDiv', 'annotations[' + data.index + ']', 'remove');
  });

<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<div id="myDiv" style="width:500px; height:600px;"></div>
<div id="debug"></div>