d3.js v4，如何在鼠标悬停时跟踪鼠标，还有一个圆圈跟着路径？

Question

这是我的小提琴：https://jsfiddle.net/DerNalia/3wzLv9yg/1/

我一直在试图解释这里的代码：Multiseries line chart with mouseover tooltip，但我似乎无法让它发挥作用。

这是我到目前为止所做的 - 它几乎是一个复制粘贴。

{{1}}

如果小提琴出现问题，我现在就是这样：

以下是我希望它出现的原因（原谅可怕的绘画技巧）：

我的问题也可能与我的错误有关。无法读取属性＆＃39;长度＆＃39;未定义的。

Answer 1

更新小提琴：https://jsfiddle.net/3wzLv9yg/2/。有一些事情会出错：

线圈

var mousePerLine = mouseG.selectAll('.mouse-per-line')
  .data(data)
  .enter()
  .append("g")
  .attr("class", "mouse-per-line");

此语句为每个数据点添加一个新的g元素，而不是每行。将其替换为具有行数长度的数组，以获取每行的元素。例如，将.data(data)替换为.data(d3.range(lines.length))。

圆位置位置的多种技术

看起来你已经结合了两种不同的技术来计算你圈子的y位置，一种是从数据值计算，另一种是从svg元素计算。

根据数据值计算的代码包含以下行：

var xDate = x.invert(mouse[0]),
    bisect = d3.bisector(function(d) { return d.x; }).right;
    idx = bisect(d.values, xDate);

bisect(d.values, xDate);出现错误，因为d.values未在任何地方分配。它应该是bisect(data, xDate);，但它可能是无关紧要的，因为它在其他任何地方都没有使用，因为函数的其余部分从svg路径计算y位置。如果你使用这种方法，你可以摆脱bisect和idx：

var xDate = x.invert(mouse[0]);

设置位置

这应该可以缓解控制台错误，但鼠标圈仍然无法正常跟踪。那是因为圆圈的位置设置了两次：

d3.select(this).select('circle')
  .attr('cy', pos.x)
  .attr('cx', pos.y);

// return position
return "translate(" + mouse[0] + "," + pos.y +")";

这些语句将g元素设置为正确的位置，但它也将circle设置为等量的偏移量。你只需要一个。由于当前实现设置了transform元素的g，因此可能更容易保留该元素并消除圆偏移。

// return position
return "translate(" + mouse[0] + "," + pos.y +")";

所有更改都在此处：https://jsfiddle.net/3wzLv9yg/2/