D3.js D3：放大时，与轴相比，多线图略为关闭

我有一个多折线图（），它不能在图形上准确地绘制数据点，并且很难调试

为了增加一些视角，我可以在Firefox v43.0.4、IE11和Chrome 36.0.1985.125M中复制这一点，这两种浏览器对我和我的客户都可用

乍一看，当您将鼠标悬停在图形上时，您将看到两条线和一个圆相交并捕捉到第（230）行所指示的最接近日期：

请注意，它们并没有完全以当天的数据点为中心

他们稍微坐在队伍的右边。起初我认为这是圆圈的

cx

属性的问题，但根据我基于此的所有示例，事件处理程序

mouseMove

似乎没有任何问题：

function mouseMove() {
    var x0 = d3.time.day.round(x.invert(d3.mouse(this)[0])),
      i = bisectDate(data, x0, 1);

  focusCircle.transition()
    .duration(333)
    .delay(50)
    .ease('bounce')
    .attr('cx', x(x0))
    .attr('cy', function(d) { return y(d.values[i-1].stat); });

  focusXLine.transition()
    .duration(333)
    .delay(50)
    .ease('bounce')
    .attr('x1', 0)
    .attr('x2', x(x0))
    .attr('y1', function(d) { return y(d.values[i-1].stat); })
    .attr('y2', function(d) { return y(d.values[i-1].stat); });

  focusYLine.transition()
    .duration(333)
    .delay(50)
    .ease('bounce')
    .attr('x1', x(x0))
    .attr('x2', x(x0))
    .attr('y1', height)
    .attr('y2', function(d) { return y(d.values[i-1].stat); });
}

果不其然，如果使用画笔或滚动鼠标滚轮进行放大，问题会更加严重：

请记住，我捕捉到最近的一天，在上面的插图中，两个轴点之间有两天的间隔，这表明左侧的绘图计划在我当前悬停的那一天落下，但它们不是。由于轴和线/圆正确对齐，我认为这与

x.domain（）

以及它如何与第232行输入的相应数据对齐有关：

x.domain(brush.empty() ? x2.domain() : brush.extent());

---

我还没能在这方面想出什么主意，尽管这是一个相当大的蚕食他人的例子，我本以为这是一个其他地方的问题，但谷歌fu在这方面没有拿出任何东西。是什么导致数据落在鼠标悬停点的左侧？

这与日期有关。在顶部生成数据的地方，生成的日期包含小时和分钟组成部分。稍后，在mousemove上，捕捉到最近的日期d3.time.day.round（…）。因此，它不会捕捉到数据，我希望差异会在一天中发生变化（比如，在午夜，它要么会正确对齐，要么可能会在一天之内消失）

修复 生成日期时，四舍五入到最近的日期：

date: d3.time.day.round(new Date(new Date().setDate(new Date().getDate() - count)))

然后，当您设置圆的y位置时，您将不再需要该

i-1

hack（它无论如何都不起作用）。它变得简单：

.attr('cy', function(d) { return y(d.values[i].stat); });

---

我觉得不错！您的JSFIDLE在Chrome 47上的工作与预期一样。我无法再现您描述的偏移量，甚至在放大第二幅图像时也无法再现。我使用的是Firefox v43和Chrome v36，这两款浏览器似乎都表现出这种行为以及IE11。轰！非常感谢你！

.attr('cy', function(d) { return y(d.values[i].stat); });