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

而不是宽度为宽度：

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

Answer 2

以下是摘要：

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

d3.js mouseover mouseout问题

2 个答案: