The tree layout implements the Reingold-Tilford algorithm for efficient, tidy arrangement of layered nodes. The depth of nodes is computed by distance from the root, leading to a ragged appearance. Cartesian orientations are also supported. Implementation based on work by Jeff Heer and Jason Davies using Buchheim et al.'s linear-time variant of the Reingold-Tilford algorithm. Data shows the Flare class hierarchy, also courtesy Jeff Heer.
Compare to this Cartesian layout.
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <style> | |
| .node circle { | |
| fill: #fff; | |
| stroke: steelblue; | |
| stroke-width: 1.5px; | |
| } | |
| .node { | |
| font: 10px sans-serif; | |
| } | |
| .link { | |
| fill: none; | |
| stroke: #ccc; | |
| stroke-width: 1.5px; | |
| } | |
| </style> | |
| <body> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script> | |
| <script> | |
| function convertToD3Representation(nxtree) { | |
| console.log(nxtree); | |
| var d3root = { | |
| name: nxtree.root.value.name | |
| }; | |
| convertNodeToD3Representaion(nxtree.root, d3root); | |
| return d3root; | |
| } | |
| function convertNodeToD3Representaion(nodeNX, nodeD3) { | |
| if (nodeNX.children === null || nodeNX.length == 0) return; | |
| nodeD3.children = []; | |
| for (var ni in nodeNX.children) { | |
| var nxChild = nodeNX.children[ni]; | |
| var d3Child = { | |
| name: nxChild.value.name | |
| }; | |
| nodeD3.children.push(d3Child); | |
| convertNodeToD3Representaion(nxChild, d3Child); | |
| } | |
| } | |
| var diameter = 1024; | |
| var tree = d3.layout.tree() | |
| .size([360, diameter / 2 - 120]) | |
| .separation(function (a, b) { | |
| return (a.parent == b.parent ? 1 : 2) / a.depth; | |
| }); | |
| var diagonal = d3.svg.diagonal.radial() | |
| .projection(function (d) { | |
| return [d.y, d.x / 180 * Math.PI]; | |
| }); | |
| var svg = d3.select("body").append("svg") | |
| .attr("width", diameter) | |
| .attr("height", diameter - 150) | |
| .append("g") | |
| .attr("transform", "translate(" + diameter / 2 + "," + diameter / 2 + ")"); | |
| d3.json("http://localhost:8080/nextprot-api-web/terminology/nextprot-anatomy-cv/2", function (error, nxroot) { | |
| if (error) throw error; | |
| var root = convertToD3Representation(nxroot.treeList[0]) | |
| console.log(root); | |
| var nodes = tree.nodes(root), | |
| links = tree.links(nodes); | |
| var link = svg.selectAll(".link") | |
| .data(links) | |
| .enter().append("path") | |
| .attr("class", "link") | |
| .attr("d", diagonal); | |
| var node = svg.selectAll(".node") | |
| .data(nodes) | |
| .enter().append("g") | |
| .attr("class", "node") | |
| .attr("transform", function (d) { | |
| return "rotate(" + (d.x - 90) + ")translate(" + d.y + ")"; | |
| }) | |
| node.append("circle") | |
| .attr("r", 4.5); | |
| node.append("text") | |
| .attr("dy", ".31em") | |
| .attr("text-anchor", function (d) { | |
| return d.x < 180 ? "start" : "end"; | |
| }) | |
| .attr("transform", function (d) { | |
| return d.x < 180 ? "translate(8)" : "rotate(180)translate(-8)"; | |
| }) | |
| .text(function (d) { | |
| return d.name; | |
| }); | |
| }); | |
| d3.select(self.frameElement).style("height", diameter - 150 + "px"); | |
| </script> |
