Skip to content

Instantly share code, notes, and snippets.

@valex
Created Nov 10, 2017
Embed
What would you like to do?
Creating a cluster dendrogram, d3.js version 4
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script src="http://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/d3-selection-multi.v1.min.js"></script>
<script>
var url = 'https://gist.githubusercontent.com/d3byex/25129228aa50c30ef01f/raw/2f8664d0eb75ef606f412f9647116954ff0af41d/radial.json'; //url='https://gist.githubusercontent.com/d3byex/25129228aa50c30ef01f/raw/ddc1d7cf560f8fff84dd9005e5bdbdd43b39a91f/flare.json';
d3.json(url, function(error, data) {
var width = 500,
height = 500,
nodeRadius = 4.5;
var svg = d3.select('body')
.append('svg')
.attrs({
width: width,
height: height
});
var radius = width / 2;
var mainGroup = svg.append('g')
.attr("transform", "translate(" + radius + "," + radius + ")");
var cluster = d3.cluster()
.size([360, radius - 50]);
// assigns the data to a hierarchy using parent-child relationships
var root = d3.hierarchy(data, function(d) {
return d.children;
});
cluster(root);
var linksGenerator = d3.linkRadial()
.angle(function(d) { return d.x / 180 * Math.PI; })
.radius(function(d) { return d.y; });
mainGroup.selectAll('path')
.data(root.links())
.enter()
.append('path')
.attrs({
d: linksGenerator,
fill: 'none',
stroke: '#ccc',
});
var nodeGroups = mainGroup.selectAll("g")
.data(root.descendants())
.enter()
.append("g")
.attr("transform", function(d) {
return "rotate(" + (d.x - 90) + ")translate(" + d.y + ")";
});
nodeGroups.append("circle")
.attrs({
r: nodeRadius,
fill: '#fff',
stroke: 'steelblue',
'stroke-width': 3
});
nodeGroups.append("text")
.attrs({
dy: ".31em",
'text-anchor': function(d) {
return d.x < 180 ? "start" : "end";
},
'transform': function(d) {
return d.x < 180 ? "translate(8)" : "rotate(180)translate(-8)";
}
})
.style('font', '12px sans-serif')
.text(function(d) { return d.data.name; });
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment