0

d3 で階層データを表現するために私が見たすべての例には、入れ子要素が含まれています。たとえば、div 内の div、またはテーブル行内のテーブル セルです。

結果のDOM要素が代わりに兄弟である階層データを表示する「正しい」方法は何ですか? たとえば、さまざまなレベルの見出し (h1、h2 など)。

私の最初の試み ( http://jsfiddle.net/herbcaudill/dTd99/ ) は、次のデータを取得します。

var data = [{
    "key" : "1",
    "values" : [{
            "key" : "101",
            "title" : "Sub Section 1.A"
        }, {
            "key" : "102",
            "title" : "Sub Section 1.B"
        }, {
            "key" : "103",
            "title" : "Sub Section 1.C"
        }
    ],
    "title" : "Section 1"
}, {
    "key" : "2",
    "values" : [{
            "key" : "201",
            "title" : "Sub Section 2.A"
        }, {
            "key" : "202",
            "title" : "Sub Section 2.B"
        }, {
            "key" : "203",
            "title" : "Sub Section 2.C"
        }
    ],
    "title" : "Section 2"
}]

...そして、次のように、要素をネストしていると想定する標準的な例を使用して、それを見出しと小見出しに変えようとします:

d3.select("body").selectAll("h1")
    .data(data)
    .enter()
    .append("h1")
        .text(function(d) {return d.title })
        .selectAll("h2")
            .data(function(d) { return d.values })
            .enter()
            .append("h2")
                .text(function(d) {return d.title})

もちろん、ネストされた要素になってしまいますが、これは私が望むものではありません:

<h1>Section 1
       <h2>Sub Section 1.A</h2>
       <h2>Sub Section 1.B</h2>
       <h2>Sub Section 1.C</h2>
</h1>
<h1>Section 2
       <h2>Sub Section 2.A</h2>
       <h2>Sub Section 2.B</h2>
       <h2>Sub Section 2.C</h2>
</h1>

代わりにこれを入手するにはどうすればよいですか？

<h1>Section 1</h1>
<h2>Sub Section 1.A</h2>
<h2>Sub Section 1.B</h2>
<h2>Sub Section 1.C</h2>
<h1>Section 2</h1>
<h2>Sub Section 2.A</h2>
<h2>Sub Section 2.B</h2>
<h2>Sub Section 2.C</h2>
4

1 に答える 1

0

OK、質問を投稿する過程でこれを理解しました。解決策は、先に進んでネストを行うことですが、データを含む div にアタッチします。次に、各 div に見出しを追加します。

var level1 = d3.select("body")
    .selectAll("div.Level1")
    .data(data)
    .enter()
    .append("div").attr("class", "Level1")

level1.append("h1").text(function(d) {return d.title })

var level2 = level1.selectAll("div.Level2")
    .data(function(d) { return d.values })
    .enter()
    .append("div").attr("class", "Level2")

level2.append("h2").text(function(d) {return d.title})

これにより、次のマークアップが得られます。

<div class="Level1">
    <h1>Section 1</h1>
    <div class="Level2">
        <h2>Sub Section 1.A</h2>
    </div>
    <div class="Level2">
        <h2>Sub Section 1.B</h2>
    </div>
    <div class="Level2">
        <h2>Sub Section 1.C</h2>
    </div>
</div>
<div class="Level1">
    <h1>Section 2</h1>
    <div class="Level2">
        <h2>Sub Section 2.A</h2>
    </div>
    <div class="Level2">
        <h2>Sub Section 2.B</h2>
    </div>
    <div class="Level2">
        <h2>Sub Section 2.C</h2>
    </div>
</div>

ここでの実例: http://jsfiddle.net/herbcaudill/DuJsS/

更新:これは優れたソリューションではないという@Larsに同意します。実際、ノードごとに1つのテーブル行を追加するという、私が実際に抱えている問題を実際に解決することはできませんtr。テーブル内に s をネストしてラップするために使用できる要素はありません。したがって、ラッパー要素を含まない、よりクリーンなソリューションを歓迎します。

于 2013-10-27T18:16:58.430 に答える