JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://d3js.org/d3.v3.min.js"></script>
JavaScript
var width = 960,
height = 960;
var diameter = 960,
radius = diameter / 2,
innerRadius = radius - 120;
var color = d3.scale.category20();
var force = d3.layout.force()
.charge(-120)
.linkDistance(30)
.size([width, height]);
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
graph=miserables();
nested = d3.nest()
.key(function (d) {
return d.group;
})
.entries(graph.nodes);
var line = d3.svg.line.radial()
.interpolate("bundle")
.tension(.85)
.radius(function (d) {
return d.y;
})
.angle(function (d) {
return d.x / 180 * Math.PI;
});
var cluster = d3.layout.cluster()
.size([360, innerRadius])
.sort(null)
.value(function(d) { return d.size; });
var link = svg.append("g").selectAll(".link"),
node = svg.append("g").selectAll(".node");
var nodes = cluster.nodes(nested.nodes),
links = graph.links;
link = link.data(bundle(links))
.enter().append("path")
.each(function (d) {
d.source = d[0], d.target = d[d.length - 1];
})
.attr("class", "link")
.attr("d", line);
node = node.data(nodes.filter(function (n) {
return !n.children;
}))
.enter().append("text")
.attr("class", "node")
.attr("dy", ".31em")
.attr("transform", function (d) {
return "rotate(" + (d.x - 90) + ")translate(" + (d.y + 8) + ",0)" + (d.x < 180 ? "" : "rotate(180)");
})
.style("text-anchor", function (d) {
return d.x < 180 ? "start" : "end";
})
.text(function (d) {
return d.key;
})
.on("mouseover", mouseovered)
.on("mouseout", mouseouted);
function mouseovered(d) {
node.each(function (n) {
n.target = n.source = false;
});
link.classed("link--target", function (l) {
if (l.target === d) return l.source.source = true;
})
.classed("link--source", function (l) {
if (l.source === d) return l.target.target = true;
})
.filter(function (l) {
return l.target === d || l.source === d;
})
.each(function () {
this.parentNode.appendChild(this);
});
...