javascript - 如何在时间划分中心对齐 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 函数反转用于将域(日期)映射到范围(屏幕上的位置)的过程。因此它获取屏幕上的位置并将其转换为等效的日期!

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

如果您想查看另一个示例，请尝试 this这解释了一个几乎相同的例子。