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

Question

我正在创建一个带有网格线的折线图。这是类似的例子：http://bl.ocks.org/hunzy/11110940 我需要在鼠标悬停时更改X（2）到X（4），X（8）到X（10）和X（12）到X（14）之间的垂直空间背景。但我无法理解如何使用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偏移量。这可用于确定矩形对象的一个​​维度。另一个维度由另一个轴的大小决定。