4

このD3ビジュアライゼーションのテキスト要素へのリンクを追加しようとしています。

http://bl.ocks.org/1093025

「フレア」、「分析」をクリックして別のページに移動するか、長方形をクリックして、サブツリーを展開する通常のアクションを実行できるようにしたいと思います。

うまくいかなかったいくつかのことを試しました：

  • onイベント

on要素にイベントを追加しようとしましたsvg:text：

nodeEnter.append("svg:text")
  .attr("dy", 3.5)
  .attr("dx", 5.5)
  .text(function(d) { return d.name; })
  .on("click",function(d,i) { alert("Clicked on the text");});
  • foreignObjectエレメント

foreignObject私はこのような要素を追加しようとしました：

 nodeEnter.append("svg:foreignObject")
  .style("float","right")
  .attr("height", 100)
  .attr("width", 100)
  .append("div")
  .html("<a href='#'>link</a>")

リンクを作成しますが、それは追加のリンクです（長方形のテキスト要素ではありません）。

  • xlink:href属性とのリンク

最後に、私は次のことも試しました（いくつかの組み合わせで）：

<a xlink:href="/svg/index.html">
    <text x="10" y="20">/svg/index.html</text>
</a>

しかし、それも機能しませんでした。

助言がありますか？

4

2 に答える 2

8

pointer-events: all私はマットの答えに同意します：pointer-events...これをcssでに変更します。

そして、これは私が力指向グラフでリンクを作成した方法です：

svg = d3.select("body").append("svg");

svg.selectAll(".node")
  .append("svg:a").attr("xlink:href", function(d){ return "generic.php?url=" + d.url })
  .append("svg:text")
  .text(function(d) { return d.name; })
  .attr("dy", 3.5)
  .attr("dx", 5.5)
  .attr("text-anchor", "middle");
  //The End ;-)
于 2014-06-12T10:43:34.400 に答える
4

.on('click', function () {})あなたがいる限り動作するはずです

  • 適切なノードを選択しました
  • cssを使用してテキスト要素のポインタイベントを無効にしていない

かなり多くの例がpointer-events: noneテキストノードに対して持っているように、ポインタイベントは人々を捕らえているようです。

于 2012-12-06T10:51:49.837 に答える