D3：与放大时的轴相比，多线图稍微偏离

Question

我有一个多线图（jsfiddle），它没有准确地在图表上绘制数据点，并且证明很难调试。

为了添加一些观点，我可以在Firefox v43.0.4，IE11和Chrome 36.0.1985.125 m中复制它，这两种浏览器可供我和我的客户使用。

乍一看，当您将鼠标悬停在图表上时，您会看到两条线和一条圆相交并按照线条（230）的指示捕捉到最近的日期：

var x0 = d3.time.day.round(x.invert(d3.mouse(this)[0])),

请注意它们并非完全以当天的数据点为中心。

他们稍稍向右倾斜。起初我认为这是圈子的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); });
}

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

请记住，我拍摄到最近的一天，并且在上图中，两个轴点之间有两天的间隙，表明左边的图是在I＆＃的那一天落下的。 39; m目前正在盘旋，但他们并非如此。由于轴和线/圆正确对齐，我认为它与x.domain()有关，以及它如何与第232行输入的相应数据对齐：

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

我还没有能够提出任何相关的内容，尽管这是其他人的相当大的蚕食。例如，我原本预计这会成为其他地方的一个问题，但谷歌的任何数据都没有提出任何问题。是什么导致数据落在鼠标悬停点的左侧？

Answer 1

与日期有关。在生成数据的顶部，您可以生成具有小时和分钟组件的日期。稍后，在mousemove上，您会捕捉到最近的一天d3.time.day.round（...）。所以它不会对数据产生影响，我希望这一差异会在一整天内发生变化（例如，在午夜，它要么正确对齐，要么可能一整天都在关闭。）

修复

生成日期时，舍入到最近的一天：

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

然后，当您设置圆圈的y位置时，您将不再需要i-1黑客（无论如何都不起作用）。它变得简单：

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

See fiddle