Question

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

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

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

鼠标悬停圈子事件触发工具提示显示。

但是我希望他们俩同时发生，这是行不通的。它可以选择鼠标悬停线或鼠标悬停但不是两者兼而有之。

无论如何要解决这个问题？为两个元素提供相同的z-index是否有帮助？

以下是代码中最相关的位＆gt;

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});

非常欢迎任何建议。

由于

丹

d3一次鼠标悬停两件事

0 个答案: