d3.js鼠标悬停鼠标输出问题

d3.js mouseover mouseout issue

本文关键字：鼠标 出问题 输出 悬停 d3 js      更新时间：2023-09-26

我又在d3.js上挣扎了。我有一个可以工作的折线图和部分可以工作的鼠标悬停。目标是将鼠标悬停仅限于svg元素，就像Mark在他的答案中使用鼠标悬停工具提示的多系列折线图一样

我用它创造了一个Plunker。我的处境就是这样。http://plnkr.co/edit/Jt5jZhnPQy4VpjwY3YBv?p=preview

我尝试过这样的事情：http://plnkr.co/edit/lRMfa0OiDWEXWYBAjoPd?p=preview通过添加：

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

但它总是把圆圈和条形图从图表中推出来，我已经摆弄了好几天了，如果有人碰巧给我指对了方向，我会非常高兴。

提前谢谢。

这里是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)

附言：我不知道你是否也希望这条线局限于图表区域，但如果你愿意，这就是plunker：http://plnkr.co/edit/RP4uYKBYnHtX1SvYsLKq?p=preview

不将宽度作为宽度：

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，因此监听鼠标事件的组的宽度应该相同。

此处的工作代码

相关文章：