Question

我有一个用SVG和D3.js绘制的多线图。共有7条线。在每个路径的各个点上，我希望用户可以将其悬停在一个点上以获取更多数据。这是通过在适当的位置绘制一个不可见的圆并为其指定标题属性来完成的。尽管所有点及其数据都显示在绘制的图形的代码中，但并非所有鼠标悬停都有效。有些要点按预期工作，而有些则根本不注册mouseover事件。

是否有一种方法可以强制所有圆都在顶部，或者将其绘制在路径上方的图层上？

我认为这可能是因为某些点被渲染到了图层的另一条路径下，所以我尝试使用d3的sort函数将所有点移到最前面。要么这不是问题，要么我的排序不正确。

var city = svg.selectAll(".city")
.data(series)
.enter().append(g)
.attr("class", "city")
.style("stroke-width", "2.5");
city.append("path")
.attr("class","line")
.attr("d", function(d) { return line(d.values); })
.style("stroke", function(d) { return setcolor(d.name); });

//Drawing the mouseover circles
city.selectAll("circle")
.data(function(d) { return d.values; })
.enter()
.append("circle")
.attr("class", "moCircle")
.attr("r", 3)
.attr("cx", function (d) { return x(d._xvalue); })
.attr("cy", function (d) { return y(d._yvalue); })
.style("fill", "gray")
.on("mouseover", function(d) { d3.select(this).style("fill", "red"); })
.on("mouseout", function(d) { d3.select(this).style("fill", "gray"); })
.append("title").text(function (d) { return "Usage:" + d.usage; });

看起来y值最高的线起作用。如果其他模式之间存在某种模式，我将无法找到它。似乎不受它们在代码中的顺序的影响。在上一个测试中，第6行和第7行（共7条）始终有效，第5行在y值最高时起作用，而第4行在某些点上有效，而在其他点上则无效。圆圈中的数据存在于代码中，并且没有错误消息。

为什么mouseover不能在所有svg路径上工作？

0 个答案: