具有关联数组数据集的D3.js表

D3.js table with an associative-array dataset

本文关键字：D3 js 数据集 关联 数组      更新时间：2023-09-26

我正在尝试生成一个表，该表嵌入到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>

因此，行数正确，但td数不正确。

编辑：执行

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

结果是一个正确的结构，尽管当我尝试使用.data（）函数和两个单独的append迭代数据集时，它当然会添加两个重复的td。

编辑2:我最终解决了我的问题，为d3.js链之外的表生成了HTML，并将其附加为.HTML（）。有什么更整洁的方法吗？

您可以这样构造数据：[["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");
})

类似的东西。

尚未编译，但它应该会给你一个想法。

相关文章：