如何在时间中心对齐d3js工具提示？

Question

我创建了一个工具提示，可以在鼠标悬停在图形区域时显示y值。但是，我注意到值的跳跃发生在x0值滴答中，而不是中间值，在x0和x1值滴答之间。如果你看下面的图像，你可以看到红线表示光标的x位置以及y值如何被错误地放置为x0 + 1px到（x1 + x0）/ 2 [其中x0是第15和x1是第16个。

这是我的代码，它大量借鉴this example。

AC.bisectDate = d3.bisector(function(d) { return d.date; }).left;

function mousemoveall(){;
    var x0 = AC.charts[0].x.invert(d3.mouse(this)[0]);
    AC.charts.forEach(function(thisChart){
        mousemove(thisChart,x0);
    });

}

function mousemove(thisChart,x0){

    var i = AC.bisectDate(thisChart.chartData, x0, 1),
        d0 = thisChart.chartData[i - 1],
        d1 = thisChart.chartData[i],
        d = x0 - d0.date > d1.date - x0 ? d1 : d0;
    var mydata = thisChart.chartData[i][AC.props[thisChart.id]];

    thisChart.focus.attr("transform","translate(" 
        + (thisChart.x(d.date) + thisChart.margin.left) + "," 
        + (thisChart.margin.top + (thisChart.height * thisChart.id) + (10 * thisChart.id) 
        + thisChart.y(mydata) ) + ")");
    thisChart.focus.select("text").text(mydata);    

}   

我怎样才能让y值突然发生在15日和16日之间，而不是15日？

Answer 1

通过省略mousemove函数中的一行，您可能无法正确返回鼠标位置。

如果您重新检查Mikes示例，您将看到一行var x0 = x.invert(d3.mouse(this)[0]),，它返回鼠标屏幕上的x位置（d3.mouse(this)[1]将返回y位置）。 x.invert函数反转用于将域（日期）映射到范围（屏幕上的位置）的过程。因此它占据屏幕上的位置并将其转换为等效的日期！

您可能已将其包含在代码中的其他位置，但我会先检查一下。

如果您想要另一个示例，请查看try this，它解释了几乎相同的示例。

Answer 2

我发现我遇到这些跳转的原因是，只要鼠标经过两个x值之间的接口（在本例中为两个日期），我就需要递减索引。创建调整转换的i2变量可修复我的跟踪问题。修改后的mousemove功能如下：

function mousemove(thisChart,x0){
    var i = AC.bisectDate(thisChart.chartData, x0, 1),
        i2 = i,
        d0 = thisChart.chartData[i - 1],
        d1 = thisChart.chartData[i],
        d = x0 - d0.date > d1.date - x0 ? d1 : d0;

    if (x0 - d0.date <= d1.date - x0) {i2 = i-1;}

    var mydata = thisChart.chartData[i2][AC.props[thisChart.id]],
        yPos = thisChart.y(mydata)+10+thisChart.margin.top,
        xPos = +thisChart.x(d.date) + +thisChart.margin.left;
    thisChart.focus.attr("transform","translate(" + xPos + "," + yPos + ")");
    thisChart.focus.select("text").text(mydata);    
}   

我不确定为什么我在其他示例中找不到这种if声明＆＃39;代码，虽然他们的工具提示对齐似乎很好。也许我的代码中有一些奇怪的东西，或者他们的数据集如此密集，你不会注意到尴尬的跳跃？