0

我的朋友，

我在这里做了一个工具提示：http: //jsfiddle.net/QBDGB/83/我已经为工具提示定义了两个“功能”，例如：

function mousemove1(d) {
    div
      .text("data 1: " + d.value + " at " + formatTime(new Date(d.time)))
      .style("left", (d3.event.pageX) + "px")
      .style("top", (d3.event.pageY) + "px");
}

function mousemove2(d) {
    div
      .text("data2: " + d.value + " at " + formatTime(new Date(d.time)))
      .style("left", (d3.event.pageX) + "px")
      .style("top", (d3.event.pageY) + "px");
}

但是当我移动光标时，它显示“data2”的值data1在哪里？当我们将鼠标悬停在两条曲线上时，我希望工具提示能够识别这两个系列的数据并显示它们的值。

4

2 回答 2

1

1.您div在每个函数中填充新数据。data2覆盖data1. 请参阅此小提琴以解决该问题。注意json我在 line 添加的变量123。

2.另一件事 - 你是.svg重叠的。它只显示svg2数据，因为它不读取你正在遍历svg1。

为了确认这一点——当你越过一个绿色或深绿色的点时——你只有data2，但是当你把鼠标放在一个蓝色的点上时，你会同时看到data1和data2（在我上面发布的链接中）。

在你越过一个蓝点后，如果你越过一个绿点，svg1数据就会保持不变。直到你越过另一个蓝点。

于 2013-07-23T08:57:04.540 回答
0

您在 mousemove 事件上绑定了两个处理程序，因此最后一个会覆盖前一个。

我认为您应该同时将两个参数传递给任何处理程序。

这是你可以做到的，

function mousemove1(d1, d2) {
div
  .text("data 1: " + d1.value + " at " + formatTime(new Date(d1.time)) +"  "+ "data 2: " + d2.value + " at " + formatTime(new Date(d2.time)))
  .style("left", (d3.event.pageX) + "px")
  .style("top", (d3.event.pageY) + "px");
}

此外，如果您一次只能传递一个可用的数据列表，那么您可以执行以下操作：

function mousemove(d, caseNum) {
    switch(caseNum) {
    case1: // do your work of first case
        break;
    case2:  // do your work of second case
       break;
    case3:  // do your work of third case
       break;
    }
}

在第二种方法中，您必须传递caseNum参数来告诉案例编号。

于 2013-07-23T09:06:15.597 回答