2

次のような構造で SVG に埋め込まれているテーブルを生成しようとしています。

<table>
  <tr>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
  </tr>
</table>

このようなデータセットから：

var a = ["a", 1, "b", 2, "c", 3]

タグの数はキーと値のペアの数に応じて動的になるため、この場合は 2 です。その内部には、それぞれキーと値を持つ 2 つの td の静的な数があります。

これまでのところ、次のようなことを試しました。

var tr = ele.append("svg:foreignObject")
                    .attr("x", 5)
                    .attr("y", 30)
                    .attr("width", 60)
                    .attr("height", 120)
                    .append("xhtml:body")
                    .attr("xmlns", "http://www.w3.org/1999/xhtml")
                    .selectAll("tr")
                      .data(d3.keys(a))
                    .enter().append("tr");
tr.selectAll("td").data(a).enter()
 .append("td")
   .text(function (d) { return d; } );

次のような結果になります。

<tr>
  <td></td>
  <td></td>
  <td></td>
</tr>  
<tr>
  <td></td>
  <td></td>
  <td></td>
</tr>
<tr>
  <td></td>
  <td></td>
  <td></td>
</tr>

したがって、正しい行数ですが、tds の数が正しくありません。

編集：実行

tr.append("td").text("test");
tr.append("td").text("test2");

正しい構造になりますが、.data() 関数を使用して .data() 関数を使用してデータセットを反復処理しようとすると、もちろん 2 つの重複した tds が追加されます。

編集 2: d3.js チェーンの外側でテーブルの HTML を生成し、それを .html() として追加するだけで問題を解決しました。それを行うよりきちんとした方法はありますか？

4

1 に答える 1

1

次のようにデータを構造化できます[["a",1],["b",2],["c",3]]。

次に、次のことができます。

var tr = table.selectAll("tr").data(data);
tr.enter().append("tr");
tr.each(function(d) {
   var td = d3.select(this).selectAll("td").data(d);
   td.enter().append("td");
})

そんな感じ。

コンパイルされていませんが、アイデアが得られるはずです。

于 2012-09-07T01:19:29.960 に答える