3

だから私はd3のズームサークルを使用しています( http://mbostock.github.com/d3/talk/20111116/pack-hierarchy.html ):

ここに画像の説明を入力

データは、いくつかの異なるレベルの配列とオブジェクトを持つ json 配列として d3 スクリプトに渡されます。

object = {
    class: "show",
    name: "Game of Thrones",
    children : [
        {
            class: "family",
            name: "Starks",
            children: [
                {
                    class: "members",
                    name: "Rob"
                },
                {
                    class: "members",
                    name: "Jon Snow"
                }
            ],
        },
        {
            class: "family",
            name: "Lannisters"
            children: [
                {
                    class: "members",
                    name: "Ser Jaime"
                },
                {
                    class: "members",
                    name: "Cersei"
                }
            ],
        }            
    ],
}

円の表示に問題はありませんでした。現在、データの階層をマップする側にナビゲーション表示を作成しようとしています。理想的には、私が望むのは次のようなものだけです:

<ul>
  <li> Game of Thrones
    <ul>
      <li> Starks
        <ul>
          <li> Rob </li>
          <li> Jon Snow </li>
        </ul>
      </li>
      <li> Lannisters
        <ul> 
          <li> Ser Jaime </li>
          <li> Cersei </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

基本的なリスト構造です。私ができることは、データの 1 レベル下にアクセスすることだけです。「div」を使用して、最初に構造をダウンさせようとしました。 

var sentimentData = data.children;

var navBox = d3.select("body").append("body:div");

navBox
    .attr("class", "navBox");

var sentimentNav = navBox.selectAll('div')
    .data(sentimentData)
    .enter()
    .append('div')
    .text(function(d){ return d.name; });

それ以上のレベルに進むことはできませんでした。再帰的な方法がおそらく最良の方法だと思っていました。以下でこの関数を試しましたが、親ノードではなく、一番上の div に div を追加しただけです。

function buildNav(d) {
 if (d.children) {
   children = d.children;
   d3.select('body').append('div')
      .data(children)
      .enter()
      .append('div')
      .attr("class", function(d) {return d.name; });
   children.forEach(buildNav); 
   d._children = d.children;  
   d.children = null;
 }
}

buildNav(data);

子を親に追加する方法、または複数レベル下のデータにアクセスする方法についての提案は大歓迎です。

4

1 に答える 1

2

ニック！質問で説明したリストを作成する例の完全なコードを次に示します (同じことを行うためのより良いコードがあるかもしれませんが、このコードは機能し、あなたが言ったことを 100% 生成します) (もちろん、これは出発点として、自然にさらにリアルなナビゲーションを開発します)

index.html:

<!DOCTYPE html>
<html>
<head>
    <title>Navigation</title>
    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
    <script src="script.js"></script>
</head>
<body onload="load()">
    <h2>Navigation</h2>
    <h4>(using D3.js-generated navigation items)</h4>
</body>
</html>

script.js:

function load(){
    object = {
        class: "show", name: "Game of Thrones",
        children : [
            {
                class: "family", name: "Starks",
                children: [
                    { class: "members", name: "Rob" },
                    { class: "members", name: "Jon Snow" }
                ],
            },
            {
                class: "family", name: "Lannisters",
                children: [
                    { class: "members", name: "Ser Jaime"},
                    { class: "members", name: "Cersei" }
                ],
            }            
        ],
    };

    buildNav(null, object);

    function buildNav(parent_ul, node){
        var current_ul, current_li;
        if(parent_ul == null)
            parent_ul = d3.select("body").append("ul");
        current_li = parent_ul.append("li").text(node.name);
        if (node.children) {
            current_ul = current_li.append("ul");  
            for (var i=0; i<node.children.length; i++) {
                buildNav(current_ul, node.children[i]); 
            };
        };
    };
};

これにより、次のページが生成されます。

ここに画像の説明を入力

これがお役に立てば幸いです。

他にご不明な点がありましたらお知らせください。

于 2013-12-26T05:37:45.877 に答える