D3 Examples - Tree Radial Layout

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v3.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>
​
<body>
<div id="container"></div>
<script>
    d3.json('familytree.json', function(error, data){
        var width = 800,
            height = 600,
            nodeRadius = 10,
            margin = {top: 50, bottom: 50, left: 50, right: 50};
​
        var minRadius = 0.5 * d3.min([
            width - (margin.left + margin.right), 
            height - (margin.top + margin.bottom)
        ]);
​
        var tree = d3.layout.tree()
            .size([360, minRadius]),
            nodes = tree.nodes(data),
            links = tree.links(nodes);
​
        var digonal = d3.svg.diagonal()
            .projection(function(d){
                var angle = (d.x - 90) / 180 * Math.PI,
                    radius = d.y;
                return [radius * Math.cos(angle), radius * Math.sin(angle)];
            });
​
        var svg = d3.select('#container')
            .append('svg')
            .attr('width', width)
            .attr('height', height);
​
        var gMain = svg.append('g')
            .attr('class', 'gMain')
            .attr('transform',
                  'translate(' + [0.5 * width , 0.5 * height] + ')');
​
        var gLinks = gMain.append('g')
            .attr('class', 'gLinks')
            .selectAll('path')
            .data(links)
            .enter()
            .append('path')
            .attr({
                d: digonal,
                fill: 'none',
                stroke: '#ccc',
                'stroke-width': 1
            });
        var gNodes = gMain.append('g')
            .attr('class', 'gNodes')
            .selectAll('g')
            .data(nodes)
            .enter()
            .append('g')
            .attr('transform', function(d){
                return 'translate(' + digonal.projection()(d) + ')';
            });
​
        gNodes.append('circle')
            .attr({
                r: nodeRadius,
                fill: '#fff',
                stroke: 'steelblue',
                'stroke-width': 2
            });
        gNodes.append('text')
            .text(function(d){
                return d.name;
            })
            .attr({
                dx: function(d){
                    return d.x < 180 === !d.children ?
                      nodeRadius * 1.2 :
                      -nodeRadius * 1.2;
                },
                dy: 0.5 * nodeRadius
            })
            .style('text-anchor', function(d){
                return d.x < 180 === !d.children ? "start" : "end";
            })
            .attr('transform', function(d){
                return "rotate(" + (d.x < 180 ? d.x - 90 : d.x + 90) + ")";
            });
    })
</script>
</body>
​
    