javascript - 带有关联数组数据集的 D3.js 表

Question

我正在尝试生成一个嵌入到 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。其中将是两个 td 的静态数量，每个 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() 函数遍历数据集时，它当然会添加两个重复的 tds。

编辑 2: 我最终通过为 d3.js 链之外的表生成 HTML 并将其附加为 .html() 来解决我的问题。有没有更简洁的方法？

Answer 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");
})

类似的东西。

还没有编译，但它应该给你一个想法。