0

上部に四分の一、左側に値を持つテーブルをプログラムで d3 に作成しようとしています。Quarters のベクトルが与えられた場合、["q1", "q2", "q3", "q4"]次のテーブルが必要です。

   | q1 | q2 | q3 | q4 |
v1 |    |    |    |    |
v2 |    |    |    |    |

以下のコードを実行すると、次のようになります。

   | q2 | q3 | q4 |
v1 |    |    |    |
v2 |    |    |    |

最初の列が欠落していることに注意してください。次のコードを使用しています。

var qtrs = ["q1", "q2", "q3", "q4"];

var info = d3.select("body"),
    thead = info.append("thead"),
    tbody = info.append("tbody");

thead.append("tr").append("th").text("")
thead.select("tr")
    .selectAll("th")
    .data(qtrs)
    .enter()
    .insert("th")
    .text(function (d) { return (d);  });

tbody.append("tr").insert("td").text("Value 1")
            tbody.append("tr").insert("td").text("Value 2")
            tbody.selectAll("tr").selectAll("td").data(qtrs).enter()
            .append("td").text("0.0");

ここでも入手できます：http://jsfiddle.net/TpCJk/

私が苦労してdata(qtrs)いる部分は、残りの列を自動的に生成するために使用しながら、テーブルに単一の要素 (つまり最初の列) を手動で選択/追加する方法です。

起こっているように見えるのは、selectAll が (手動で作成された) 空のセルも選択して上書きしていることです。後で最初の列を追加しようとしました（thead.select("tr").insert("th").text("...");作成後に配置しますが、最初thではなく、常にテーブルの最後に配置されるようです。

ここでのqtrs配列は一例であることに注意してください。私の完全なアプリケーションでは、渡されたデータに依存します (つまり、より長くても短くてもかまいません)。「Value 1」と「Value 2」の行は固定です。

どんな助けでも大歓迎です！

4

1 に答える 1

0

問題は、データを通じて指定されていないテーブル (ヘッダー) セルが既にあることです。D3 が (関数内で) データ要素を DOM 要素に一致させる方法data()は、既定ではインデックスによるものです。つまり、渡す最初のデータ要素は、特定のケースでは既に存在する最初のテーブル (ヘッダー) セルと一致します。したがって、.enter()選択には含まれません。

これを修正する最善の方法は、データを DOM 要素に一致させる方法を D3 に指示する関数を単純に提供することです。コード

thead.select("tr")
     .selectAll("th")
     .data(qtrs, function(d) { return d; })
     .enter()
     .insert("th")
     .text(function (d) { return (d);  });

すべてのテーブル ヘッダーを正しく挿入します。表のセルを追加するときに同じ照合関数を指定すると、それらも正しく (つまり、正しい列数で) 追加されます。

于 2013-05-01T19:34:00.930 に答える