CODEWITHSUNDEEP
javascriptsvgd3.jshierarchical-datadendrogram
Tim
Tim

Reputation: 1023

d3.js dendrogram with leaves rendered as key-value pairs

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

Upvotes: 0

Views: 496

Answers (1)

Lars Kotthoff
Lars Kotthoff

Reputation: 109232

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.

Upvotes: 1

Related Questions