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

導致正確的結構，雖然當我嘗試使用。數據（）函數通過數據集進行迭代有兩個單獨的追加，這當然增加了兩個重複的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"); 
}) 

類似的東西。

還沒有編譯，但它應該給你一個想法。