d3.js鼠標懸停鼠標問題

Question

再次我正在努力與d3.js。我有一個工作折線圖和部分工作鼠標懸停。目標是將鼠標懸停限制在svg元素上，就像Mark在回答中工作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

這裏是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：我不知道，如果你希望線限制在圖表區域，但是如果你想要的話，這就是蹲點：http://plnkr.co/edit/RP4uYKBYnHtX1SvYsLKq?p=preview

Answer 2

而不是給寬度爲寬度：

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，所以聽到鼠標事件的組的寬度應該相同。

工作代碼here