37

私は一般的にd3.jsまたはjavaの完全な初心者です。http://bl.ocks.org/1093025のインデントされたツリーの例を使用しています。これをローカルコンピューターで動作させるのに2時間かかったので、私のスキルレベルがわかるはずです。

flare.jsonファイルを開いて、それをいじり始め、正常に操作することができました。こんな感じ

{
    "name": "Test D3",
    "children": [
        {
            "name": "News",
            "children": [
                {
                    "name": "CNN",
                    "size": 1000
                },
                {
                    "name": "BBC",
                    "size": 3812
                }
            ]
        },
        {
            "name": "Blogs",
            "children": [
                {
                    "name": "Engaget",
                    "size": 3938
                }
            ]
        },
        {
            "name": "Search",
            "children": [
                {
                    "name": "Google",
                    "size": 3938
                },
                {
                    "name": "Bing",
                    "size": 3938
                }
            ]
        }
    ]
}

私が今やりたいのは、ハイパーリンクを追加することです。たとえば、「CNN」をクリックしてCNN.comにアクセスできるようにしたい。それを行うflare.jsonに変更を加えることはできますか？

4

1 に答える 1

60

非常に簡単です。「キー」と「値」のペアをさらに追加するだけです。例：

        "children": [
            {
                "name": "Google",
                "size": 3938,
                "url":  "https://www.google.com"

            },
            {
                "name": "Bing",
                "size": 3938,
                "url":  "http://www.bing.com"

            }
        ]

もちろん、d3コードでは、append <svg:a>タグを付けてxlink:href属性を設定する必要があります。

ここにあなたに役立つかもしれないいくつかのhtmlとd3-コードがあります。まず、htmlファイルにxlink名前空間をインポートする必要があります。

<html xmlns:xlink="http://www.w3.org/1999/xlink">
...
</html>

次に、各データ要素にノードを追加するd3描画コードで、クリック可能なリンクにする要素をsvg:aタグでラップします。

nodeEnter.append("svg:a")
  .attr("xlink:href", function(d){return d.url;})  // <-- reading the new "url" property
.append("svg:rect")
  .attr("y", -barHeight / 2)
  .attr("height", barHeight)
  .attr("width", barWidth)
  .style("fill", color)
  .on("click", click);  // <- remove this if you like

SVGリンクのデフォルトの動作を妨げる可能性があるため、.on（ "click"、click）を削除して、クリックハンドラー（元の例にある）を削除することをお勧めします。

をクリックするrectと、適切なに移動しますurl。SVGリンクは、すべてのブラウザに完全に実装されているとは限りません。

または、ハンドラーを変更しclickてURLを読み取り、そのハンドラーをd.url使用して、JavaScriptを介してブラウザーをそのURLに手動でリダイレクトすることもできますwindow.location = d.url;。svg:aそうすれば、タグとxlinkコードは必要ありません。実際のリンク（スクリプト化されたリンクではない）を追加すると、ユーザー/ブラウザーが何をするかを決定できるという利点があります（たとえば、新しいタブ/ページで開く）。一部のユーザーがJavaScriptを無効にしている場合にも役立ちます。

于 2012-10-28T13:27:45.577 に答える