javascript - 一度に2つのものをマウスオーバーするd3

Question

折れ線グラフがあり、マウスオーバーで線を強調表示し、ほろ酔いに作成されたツールチップも表示したいと思います。

それぞれを個別に動作させることはできますが、2 つを組み合わせています。

マウスオーバー ライン イベントは、線の太さと色の変更をトリガーします。

非表示の円イベントにマウスオーバーすると、ツールチップが表示されます。

しかし、両方を同時に発生させたいのですが、これは機能していません。線のマウスオーバーまたは円のマウスオーバーのいずれかでピックアップしますが、両方ではありません。

とにかくこれを解決する方法はありますか？両方の要素に同じ 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});  

どんなアドバイスでも大歓迎です。

ありがとう

ダン