D3.js:鼠标悬停在网格线之间

Question

我正在创建一个带有网格线的折线图。下面是一个类似的例子：http://bl.ocks.org/hunzy/11110940在鼠标悬停时，我需要将X（2）到X（4）、X（8）到X。但我不知道如何使用D3来引用网格线之间的空间。

Answer 1

没有什么可点击/悬停的地方。法线轴/栅格创建的是直线，而不是矩形。您需要更改轴对象的默认行为，以创建"不可见但可单击"的矩形，以便能够将鼠标事件附加到这些空间。

我不知道这是否是推荐的方法，但它似乎可行。创建轴后：

something
    .attr('class','xaxis')
    .call(xAxis)

你可以选择这样的记号：

d3.select(svg).select('.xaxis g.tick').each(function(){
    // this.transform will be "translate(X,Y)"
})

在函数中，您可以查询g元素的现有属性，并提取transform属性，该属性将包含"tick"的X和Y偏移量。这可用于确定矩形对象的一个维度。另一个维度是由另一个轴的大小或类似的东西决定的。