Javascript d3.js mouseover mouseout问题

我再一次为d3.js而挣扎。我有一个工作折线图和部分工作鼠标。目标是将鼠标移动限制为仅限于svg元素，就像Mark在他的答案中使用它一样

我用它创造了一个劫掠者。我的情况就是这样。

我也试过这样的方法： 加入：

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

但它总是把圆圈和横杆从图表中推出来，我现在在摆弄几天，如果有人碰巧给我指出了正确的方向，我会非常高兴

---

先谢谢你

而不是将宽度指定为宽度：

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

执行此操作（为折线图指定与域x相同的组宽度）

原因:

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

x刻度的宽度是

w-padding*2

，因此收听鼠标事件的组的宽度应该相同

工作代码这里是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：我不知道您是否希望线条也限制在图表区域内，但如果您希望，这是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)