D3.js表关联阵列数据集

我试图产生正被嵌入SVG具有结构像这样的表：D3.js表关联阵列数据集

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

导致正确的结构，虽然当我尝试使用。数据（）函数通过数据集进行迭代有两个单独的追加，这当然增加了两个重复的TDS 。

编辑2： 我已经结束了通过生成d3.js链的表之外的HTML，只是其附加的的.html解决我的问题（）。有没有更好的方法可以做到这一点？

来源

2012-09-04 Daniel Z.

您可以像这样构造您的数据：[["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-07 01:19:29 Glenn

D3.js表关联阵列数据集

回答

相关问题