d3.js樹狀圖，葉子呈現為鍵值對

Question

使用d3.js並具有分層數據，並使用此示例d3樹狀圖幾乎可以滿足我的需求，但是我需要顯示一個表格，而不是像文本字符串那樣顯示葉子。 數據遵循以下模式：

{"name": "root",
 "children": [
  {"name": "dtable",
   "children": [
    {"label": "la01", "tag":"section", "title":"Section One"}
    {"label": "la02", "tag":"section", "title":"Section Two"}
    {"label": "la0201", "tag":"subsection", "title":"Subsection Two:One"}
    ]
  }
}

我希望將葉子渲染成這樣：

----------------------------------------------
| label    | tag        | title              |
----------------------------------------------
| la01     | section    | Section One        |
| la02     | section    | Section Two        |
| la0201   | subsection | Subsection Two:One |
----------------------------------------------

d3示例包含此代碼段，該代碼段將葉子顯示為文本字符串。 我不知道如何重新設計或替換代碼以顯示表格：

nodeEnter.append("svg:text")
  .attr("x", function(d) { return d.children || d._children ? -10 : 10; })
  .attr("dy", ".35em")
  .attr("text-anchor", function(d) { return d.children || d._children ? "end" : "start"; })
  .text(function(d) { return d.name; })
  .style("fill-opacity", 1e-6);

Answer 1

渲染與表格一樣大的內容可能很難在空間上實現。 最簡單的方法是附加一個foreignObject元素而不是text元素，然后創建一個包含需要顯示的數據的HTML table 。

有關如何使用foreignObject的示例，請參見此處 。 您可能還會發現本教程對創建實際表很有幫助。