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

这样的事情。

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

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

1 个答案: