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。其中将是两个 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() 函数遍历数据集时，它当然会添加两个重复的 td。

编辑 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 回答