d3.js 鼠標懸停鼠標懸停問題

Question

我再次為 d3.js 苦苦掙扎。 我有一個有效的折線圖和部分有效的鼠標懸停。 目標是將鼠標懸停僅限於 svg 元素，就像馬克在他的回答Multiseries line chart with mouseover tooltip 中工作一樣

我用它創建了一個Plunker。 我的情況就是這樣。 http://plnkr.co/edit/Jt5jZhnPQy4VpjwY3YBv?p=preview

我已經嘗試過這樣的事情： http://plnkr.co/edit/lRMfa0OiDWEXWYBAjoPd?p=preview通過添加：

.attr("transform", "translate(" + margin.left + "," + margin.top + ")")

但它總是將圓圈和條形推出圖表，我現在正在擺弄幾天，如果有人碰巧指出我正確的方向，我會非常高興。

先感謝您。

Answer 1

而不是將寬度作為寬度：

mouseG.append('svg:rect') 
.attr('width', width) 

這樣做（將組的寬度與折線圖的域 x 相同）

mouseG.append('svg:rect') 
.attr('width', w - padding * 2) 

原因：

var xScale = d3.time.scale()
    .domain([xExtents[0], xExtents[1]])
    .range([padding, w - padding * 2]);

x 比例的寬度為w - padding * 2因此偵聽鼠標事件的組的寬度應該相同。

工作代碼在這里

Answer 2

這是plunker：

http://plnkr.co/edit/MEtbBqN5qr82yr0CNhUN?p=preview

我只是改變了矩形的大小：

mouseG.append('rect')
.attr("x", margin.left)
.attr("y", margin.top)
.attr('width', w - margin.left - margin.right) 
.attr('height', height - margin.bottom - margin.top)

PS：我不知道您是否也希望將線條限制在圖表區域，但如果您願意，這就是 plunker： http ://plnkr.co/edit/RP4uYKBYnHtX1SvYsLKq?p=preview