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

Question

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

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

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

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

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

谢谢。

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

jsFiddle

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

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)) < SomeThreshold 。使用阈值本质上是在光标可以落在其中的线周围绘制一个框。

然后在 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 轴差异微不足道(这两点之间的结果始终为零)。

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