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偏移量。這可以用來確定矩形對象的一個​​維度。另一個維度由另一個軸的大小或類似的東西決定。