d3.js mouseover mouseout issue

Question

もう一度私はd3.jsに苦労しています。私は、動作中のLine Chartと部分的に動作するマウスオーバーを持っています。目的はMarkが彼の答えで働いているように、マウスオーバーを単に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

作業

がplunkerです：

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/MEtbBqN5qr82yr0CNhUN?p=preview

私は単にあなたの四角形のサイズを変更します場合、私は知りませんラインをチャートエリアに限定したいと思っていますが、必要ならば、これはプランナーです：http://plnkr.co/edit/RP4uYKBYnHtX1SvYsLKq?p=preview

Answer 2

代わり幅と幅を与える：

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

：

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

この（折れ線グラフのドメインxと同じグループの幅を与える）

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

理由を行います

xスケールの幅がw - padding * 2なので、マウスイベントを受信して​​いるグループの幅は同じです。コードここhere