1

各最終ノードにハイパーリンクとテキストを提供するために d3 ツリー レイアウトを拡張したい

http://mbostock.github.io/d3/talk/20111018/tree.html

たとえば、

flare> analytics > ckuster > AgglomerativeClustr

AgglomerativeCluster というテキストの下に、カスタム HTML を使用できるテキスト ボックスが必要です。

どうすればいいですか？

4

2 に答える 2

2

目的を達成する方法はいくつかありますが、以下の解決策はシンプルで効率的だと思います。

私はあなたのものに似ていて、ハイパーリンクも持っていない例から始めます:

jsfiddle へのリンク - 出発点,

必要であるが単純な変更をすべて説明します。

まず、ハイパーリンクとしてラベルを付けたいノードのフィールド「url」を追加しましょう。

        {
            "children": [{
            "name": "AgglomerativeCluster",
            "size": 3938,
            "url": "http://www.example.com/"    
        }, {
            "name": "CommunityStructure",
            "size": 3812,
            "url": "http://www.example.com/"    

        }, {
            "name": "HierarchicalCluster",
            "size": 6714,
            "url": "http://www.example.com/"    

        }, {
            "name": "MergeEdge",
            "size": 743,
            "url": "http://www.example.com/"    
        }

ここで、ノード データにフィールド "url" に何かが含まれているすべてのラベルを選択するコードを書き、そのようなラベルごとに、対応する URL を開く適切なクロック ハンドラを追加します (また、ユーザーがラベルを認識できるように、マウスオーバー用に異なるカーソル ポインタを設定します)。実際にはハイパーリンクです）

d3.selectAll(".node text")
    .filter(function(d){ return d.url; })
    .style("cursor", "pointer")
    .on("click", function(d){
        document.location.href = d.url;
    });

それでおしまい！

jsfiddle へのリンク - 完成した例

于 2014-05-06T12:44:57.077 に答える
2

注: これを書き終える頃には、仲良しの @VividD が既に回答を提供していました。しかし、OP はカスタム HTML への要望を表明したため、これはまだ関連している可能性があります。

基本的に、HTML と SVG を何らかの形で混在させたいという一般的な要求があります。ただし、時間がかかり、機能させるにはかなりの量のレイアウトに関する考慮事項があるため、これの既製の実装が見つからない可能性があります（以下にリンクしたフィドルの x、y 属性の設定を参照してください-簡単にするためにハードコーディングされています） ）。そうは言っても、ここにあなたを助けるための私の試みがあります。

最も一般的な解決策は、SVG:foreignObjectを使用することです。ただし、IE ではサポートされていないことに注意してください。これは、非常に単純な例を紹介する偉大な Mike による要点です。私は自由にそれを拡張し、もう少し精巧な例、テキストエリアを持つフォームでFIDDLEを作成しました。いくつかのアイデアを生み出し、あなたを前進させるには、これで十分だと思います。

svg.append("foreignObject")
    .attr("x", 40)
    .attr("y", 40)
    .attr("width", 480)
    .attr("height", 240)
  .append("xhtml:body")
    ...

問題を完全に解決できない場合は、(これに基づいて) 独自のフィドルを生成することを検討してください。

于 2014-05-06T13:23:07.213 に答える