0

我有一个折线图，想在鼠标悬停时突出显示线条并显示创建的工具提示。

我可以让每个人单独工作，但它将两者结合起来。

鼠标悬停线事件触发线粗细和颜色的变化。

鼠标悬停隐藏圈事件触发工具提示出现。

但我希望它们同时发生，这是行不通的。它要么在鼠标悬停的线上或在鼠标悬停的圆圈上拾取，但不是两者兼而有之。

有没有办法解决这个问题？给两个元素相同的 z-index 是否有帮助？

以下是代码中最相关的部分 >

variant.append("path")
 .attr("class", "line")
 .attr("d", function(d) {return line(d.values);})
 .style("stroke", "lightgrey")
 .on("mouseover", function (d,i) {d3.select(this).style("stroke","black").style("stroke-width", "4.5px").style("opacity","1.0")})
 .on("mouseout", function (d,i) {d3.select(this).style("stroke","lightgrey").style("stroke-width", "3.5px").style("opacity","0.55")})

 variant.selectAll("circle")
    .data(function (d) {return (d.values);})
    .enter()
    .append("circle")
    .attr("class", "tipcircle")
    .attr("cx", function(d,i){return x(d.date)})
    .attr("cy", function(d,i){return y(d.popvar)})
    .attr("r", 5)
    .style("opacity", 0)
    .attr("title", maketip);

$('circle').tipsy({opacity:0.9, gravity: 'n', html:true});

非常欢迎任何建议。

谢谢

担

4

0 回答 0