流程图 - 如何在线悬停时触发事件

Question

我为 jQuery Flot 图表编写了一个插件，它允许您通过单击图表的线条动态添加数据点，通过右键单击删除它们，还允许在画布上拖动这些点。

这工作正常，当您将鼠标悬停在一个点上或拖动一个点时，我还有一个显示 Y 值的工具提示。

我想要做的是，当用户将鼠标悬停在显示消息“左键单击以添加数据点”的行上时，显示第二个工具提示。

我似乎找不到一种方法将悬停事件添加到该行本身，并且似乎没有本机方法。

有谁知道我该如何实现这一目标？

谢谢。

编辑：这里是一个 jsFiddle，其中包含我正在使用的工具提示创建代码：

jsFiddle

因为您可以看到工具提示当您将鼠标悬停在实际数据点上时呈现，但是我想找到一种方法来触发，当您将鼠标悬停在数据点之间的线上时呈现单独的工具提示。注意：这个小提琴不包括我的自定义代码来动态添加和拖动数据点，因为对于这个问题来说，代码太多了。

Answer 1

因此，基本上我们希望当光标的位置满足其位于图表上的一条线上的要求时有条件地显示工具提示。由于线不是一个实体，我们可以与您合作，您需要计算光标两侧最近的两点之间的线，然后查看您当前的位置是否位于其上。我稍微简化了你的例子：

计算两点之间距离的函数：

function lineDistance( p1x, p1y,p2x, p2y ) {
    return Math.sqrt( (p2x - p1x)*(p2x - p1x) + (p2y-p1y)*(p2y-p1y) );
}

假设距离光标 C 最近的两个点是 A 和 B，那么距离 AB 应等于 AC + BC代码>.

所以判断是否上线：Math.abs(AB-(AC+BC)) Math.abs(AB-(AC+BC)) Math.abs(AB-(AC+BC)) 一些阈值。使用阈值本质上是在光标可以落在其中的线周围绘制一个框。

然后在 plothover 中扩展你的代码 (jsFiddle)

$(placeholder).bind("plothover", function (event, pos, item) {
    if (item) {
        var tipText;

        if (opts.xaxis.mode === "time" || opts.xaxes[0].mode === "time") {
            tipText = stringFormat(to.content, item, timestampToDate);
        } else {
            tipText = stringFormat(to.content, item);
        }

        $tip.html(tipText).css({
            left: tipPosition.x + to.shifts.x,
            top: tipPosition.y + to.shifts.y
            }).show();
    } else {
         // Extended for line hover
         var series = plot.getData();
         var xBeforeIndex = 0;
         var xAfterIndex = -1;
         var Threshold = 0.0000025;
         var i = 1;
         while (i <= series[0].data.length && xAfterIndex==-1) {
             if (xAfterIndex == -1 && pos.x > series[0].data[i][0]) {
                 xBeforeIndex = i;
             } else if (xAfterIndex == -1) {
                 xAfterIndex = i;
             }
             i++;
         }

         var onTheLine = 
             lineDistance(
                series[0].data[xBeforeIndex][0]/10000,series[0].data[xBeforeIndex][1], 
                pos.x/10000, pos.y)
             +lineDistance(pos.x/10000, pos.y,
                series[0].data[xAfterIndex][0]/10000,series[0].data[xAfterIndex][1])
             -lineDistance(
                series[0].data[xBeforeIndex][0]/10000,series[0].data[xBeforeIndex][1],
                series[0].data[xAfterIndex][0]/10000,series[0].data[xAfterIndex][1]);

          if (Math.abs(onTheLine) < Threshold) {
              tipText = "Found Line";
              $tip.html(tipText).css({
                  left: tipPosition.x + to.shifts.x,
                  top: tipPosition.y + to.shifts.y
                  }).show();
           } else {
               $tip.hide().html('');
           }
       }
  });

这里没有完成的事情：

1. 更适当地检查您的边缘情况 - 上面假设第一个和最后一个点位于图的边缘上。
2. 添加回第二个图表
3. 使用冒泡排序等方法查找之前/之后的索引，提高数据集搜索性能。
4. 请注意，我将 x 轴缩小了 10000。数字太大，并且前两点之间的巨大间隙使得 y 轴差异微不足道（这两点之间的结果始终为零）。

请注意，添加第二个图表将要求您找到两个图表的最近点并检查它是否落在任何一条线上。如果您的线很近或相交，您可以将其中一条作为优先线。如果您在添加第二行时遇到困难，我稍后可以提供帮助。