d3.js 树状图，叶子呈现为键值对答案

【问题标题】：d3.js dendrogram with leaves rendered as key-value pairsd3.js 树状图，叶子呈现为键值对
【发布时间】：2013-10-08 16:06:46
【问题描述】：

使用 d3.js 并且我有分层数据并使用此示例 d3 dendrogram 几乎可以满足我的需求，但是我需要显示一个表格，而不是作为叶子的文本字符串。数据遵循以下模式：

{"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 示例有这个 sn-p，它将叶子显示为文本字符串。我不知道如何重新设计或替换代码以显示表格：

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

【问题讨论】：

标签： javascript svg d3.js hierarchical-data dendrogram

【解决方案1】：

渲染与表格一样大的东西在空间方面可能难以实现。最简单的方法是附加一个 foreignObject element 而不是 text 元素，然后创建一个 HTML table 包含您需要显示的数据。

有关如何使用foreignObject 的示例，请参阅here。您还可能会发现 this tutorial 对创建实际表格很有帮助。

【讨论】：