0

我已经建立了一个 d3 折线图，其中包含 3 条线，当用户将鼠标移到线上时，一条线已突出显示。事实证明，以这种方式选择线条非常困难。所以我尝试编写一个代码来检测最接近鼠标的线（在垂直维度上）。这工作正常：

http://plnkr.co/edit/7CD1KtqUJVnUF4KgFmUm?p=preview

我现在的问题是，如果线路在开始时“中断”，这不会以这种方式工作。

http://plnkr.co/edit/0as4QOYVYO0dhZIjGx86?p=preview

我添加了defined()对 line 函数的调用：

var line0 = d3.svg.line()
    .interpolate("cardinal")
    .x(function(d,i) {return x(i);})
    .y(function(d) {return y(d);});
var line1 = d3.svg.line()
    .interpolate("cardinal")
    .x(function(d,i) {return x(i);})
    .y(function(d) {return y(d);})
    .defined(function (d,i) {return i > 1;});   // <- Here ...
var line2 = d3.svg.line()
    .interpolate("cardinal")
    .x(function(d,i) {return x(i);})
    .y(function(d) {return y(d);})
    .defined(function (d,i) {return i > 3;});   // <- and here.

同样的问题，如果线条以不同的 x 值开头，我在这里模拟的有点骇人听闻：

http://plnkr.co/edit/hOtXOmQapYsuYgf9HkD3?p=preview

线条，我正在显示连接测量值，如果缺少测量值，线条就会中断。所以这些中断可能无处不在。你知道这个问题的解决方案吗？

4

3 回答 3

3

我建议你画成对的线，第一条线是你现在正在绘制的线，但是带有指针事件：无，然后第二条线（具有相同的坐标）将是可见性：隐藏但带有笔划和一个合理的笔划宽度，所以很容易选择。

当用户将鼠标悬停在隐藏线上时，您可以像将鼠标悬停在可见线上一样进行处理。

于 2013-08-21T15:52:36.593 回答
1

好的，这是我没有隐藏线的最终解决方案：

http://plnkr.co/edit/mGIUnwNNZxtuyobAWs0P?p=preview

数据格式有点具体，但很容易适应。

于 2013-08-22T17:15:46.600 回答
0

我通过为每条可见线添加一条隐藏线并在隐藏线上应用问题中显示的函数来解决它。我添加了一些点，以确保每条隐藏线都从图表的左侧开始，没有中断并在图表的末尾结束。

在这张图片中，我让隐藏线以较低的饱和度可见，并标记了那些额外的点。basis除了添加的起点和终点外，它们非常接近原始点，并且似乎与monotone插值配合得很好：

加分

  1. 计算最小值和x最大值。
  2. 添加额外的数据记录（使用 shift() 和 push() 来“迭代”数据）并s: true为每个额外的点设置。
  3. 将 line 函数复制为两个 line 函数 (lineHidden和lineVisible)。
  4. 将条件添加!record.s到 的defined()函数中linieVisible。
  5. 使用两个线功能为每个系列绘制一条可见线和一条隐藏线，并将隐藏线隐藏。将这些行放入两个变量中：var hiddenLines = [...], visibleLines = [...].
  6. 在隐藏线上使用问题中显示的功能，但在可见线上突出显示。

下一个任务是不突出显示一行，如果它在鼠标位置被打断......

编辑

可以通过创建一个数组来解决这个问题

interruptions = [
    [<x pos left>, <x pos right>, <series id>],
    ...
]

x 位置可以用 scale 函数计算x()。

在鼠标悬停时，我遍历该数组进行查找，哪些行在这里有中断，只使用其他行。

于 2013-08-22T09:20:06.960 回答