javascript - d3ツリーの葉にマウスオーバーポップアップを追加する

Question

ここで、d3 を使用して折りたたみ可能なアニメーション化されたインデント ツリーを構築するこの素晴らしい例に出くわしました。

mouseoverリーフ ノードでイベントが発生したときに機能するポップアップを追加するにはどうすればよいですか? 実際のノードの横にポップアップが表示されます。

Answer 1

.on イベントを nodeEnter.append("svg:circle") セクションに追加することで、mouseover と mouseout で必要なことはほとんど何でも実行できます。

nodeEnter.append("svg:circle")
  //.attr("class", "node")
  //.attr("cx", function(d) { return source.x0; })
  //.attr("cy", function(d) { return source.y0; })
  .attr("r", 4.5)
  .style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; })
  .on("mouseover", addLabel)
  .on("mouseout", clearLabel)
  .on("click", click);

これらの 2 行に加えて、addLabel 関数と clearLabel 関数を記述する必要があります (例の子ノードを表示または非表示にするクリック関数のように)。

ノードの位置を関数に渡すか、マウスに相対的に配置することで、ポップアップをノードに表示させることができます。