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

Question

Working with d3.js and I have hierarchical data and working with this example d3 dendrogram which nearly meets my needs, but instead of a text string as the leaf, I need to display a table. The data follows this pattern:

{"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"}
    ]
  }
}

I'd like the leaf to be rendered something like this:

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

The d3 example has this snippet which displays the leaf as a text-string. I'm at a loss on how to reengineer or replace the code to show a table instead:

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

Rendering something as large as a table might be difficult to achieve space-wise. The easiest way would be to append a foreignObject element instead of the text element and then create a HTML table that contains the data you need to show.

See here for an example of how to use foreignObject . You may also find this tutorial helpful for creating the actual table.