Radial Tree - new root at branch click
by Nivaldo
CSS
.node {
font: bold 12px sans-serif;
cursor: pointer;
}
.link {
fill: none;
stroke: #ccc;
stroke-width: 1.5px;
}
JavaScript
var root = {
"name": "0",
"children": [
{"name": "1", "size": 1, children: [
{"name": "a", size: 1},
{"name": "a", size: 1},
{"name": "a", size: 1},
{"name": "a", size: 1}
]
},
{"name": "2", "size": 1, children: [
{"name": "b", size: 1},
{"name": "b", size: 1},
{"name": "b", size: 1},
{"name": "b", size: 1}
]
},
{"name": "3", "size": 1, children: [
{"name": "c", size: 1},
{"name": "c", size: 1},
{"name": "c", size: 1},
{"name": "c", size: 1}
]
},
{"name": "4", "size": 1, children: [
{"name": "d", size: 1},
{"name": "d", size: 1},
{"name": "d", size: 1},
{"name": "d", size: 1}
]
},
{"name": "5", "size": 1, children: [
{"name": "e", size: 1},
{"name": "e", size: 1},
{"name": "e", size: 1},
{"name": "e", size: 1}
]
},
{"name": "6", "size": 1, children: [
{"name": "f", size: 1},
{"name": "f", size: 1},
{"name": "f", size: 1},
{"name": "f", size: 1}
]
}
]
};
var diameter = 400,
width = diameter,
height = diameter;
var i = 0,
duration = 0;
var tree = d3.layout.tree()
.size([360, diameter / 2 - 80])
.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", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(" + diameter / 2 + "," + diameter / 2 + ")");
var color = d3.scale.category20();
var nodeEnter,
depthFactor = 85;
update(root);
function update(source) {
var nodes = tree.nodes(source),
links = tree.links(nodes);
// Normalize for fixed-depth
nodes.forEach(function (d)...