.json ファイルに独自のデータ セットを使用して、d3 の例の 1 つからツリー構造を変更しています。自分のデータを含む作業コピーがあります。ここでやりたいことは、対応する URL にリンクするようにテキストを変更することです。これを行う方法について、私が見つけたドキュメントはあまりないようです。
これは私が使用しているツリーの例です: http://bl.ocks.org/1249394
どこから始めるべきかについて何か提案はありますか?
.json ファイルに独自のデータ セットを使用して、d3 の例の 1 つからツリー構造を変更しています。自分のデータを含む作業コピーがあります。ここでやりたいことは、対応する URL にリンクするようにテキストを変更することです。これを行う方法について、私が見つけたドキュメントはあまりないようです。
これは私が使用しているツリーの例です: http://bl.ocks.org/1249394
どこから始めるべきかについて何か提案はありますか?
これを行う最も簡単な方法は、JSON の「name」要素にリンクを配置することです。次に、リンクの要素とその中の要素のsvg:a
代わりに要素を作成する必要があります。例えば、ラインsvg:text
svg:text
nodeEnter.append("svg:text").text(function(d) { return d.name; });
になる
nodeEnter.append("svg:a").attr("xlink:href", function(d) { return d.name; })
.append("svg:text").text(function(d) { return d.name; });
もちろん、リンク ターゲットとテキストに個別の JSON 要素を使用することもできます。リンクの詳細については、SVG 仕様を参照してください。
svg:foreignObject
または、 を使用してリンク用の HTML を埋め込むこともできます。詳しくはこちらをご覧ください。
これがまだ有用な場合はわかりませんが、JSON は 1 つしか使用できません。
d.something_else_than_name を返すだけで、この "something_else_than_name" は "name" の後に JSON に記述する必要があります。
だから、例えば
{"name": "stackoverflow", "link": "http://stackoverflow.com"},
その後、前に述べたように、ページでそれを返すだけです:
.attr("xlink:href", function(d) { return d.link; })
これが誰かに役立つことを願っています。