1

私は D3 でテーブルを学習しています。私の質問は、「.select()」をいつ使用するかです。

たとえば、円を作成する場合:

var circles = svg.selectAll("circle")
    .data(dataSet)
    .enter()
    .append("circle")
    .attr("r", 2.5)
    .attr("cx", function(d){ return d.x})
    .attr("cy", function(d){ return d.y});

円（空）を選択->円を追加

しかし、私がテーブルを構築しているとき、

次のコードは、最初に select("table") を使用せずに、テーブルを直接追加します。「tr」も同様です。

function tabulate(data, columns) {
    var table = d3.select("#container").append("table"),
        thead = table.append("thead"),
        tbody = table.append("tbody");

    // append the header row
    thead.append("tr")
        .selectAll("th")
        .data(columns)
        .enter()
        .append("th")
            .text(function(column) { return column; });

( 「csv からテーブルを作成する」のコード)

次のコードが機能しないのはなぜですか?

function tabulate(data, columns) {
    var table = d3.select("#container")
        .select("table")
        .append("table"),
        thead = table.append("thead"),
        tbody = table.append("tbody");

前もって感謝します、

4

1 に答える 1

0

Select は通常、特定の要素が存在することを既に知っていて、その要素への参照を取得して変更 (または子を追加) する場合に使用されます。div には table タグがないことがわかっているので、それを選択しても意味がありません。

table タグが存在するかどうかわからず、他のデータに基づいて作成したい場合は、コードを次のように変更できます。

var table = d3.select("#container")
    .select("table")
    .data(['hi'])
    .enter()
    .append("table"),
    thead = table.append("thead"),
    tbody = table.append("tbody");

ただし、この回答で著者が説明しているように、select と selectAll の動作には微妙な違いがあります。サンプル コードでは、div 内ではなく、body 内にテーブル タグを直接作成します。したがって、要素を実際にデータにバインドする場合を除き、直接追加することをお勧めします。

于 2013-01-29T14:36:01.073 に答える