var data = {
"name": "Root",
"children": [{
"name": "Branch 1"
}, {
"name": "Branch 2",
"children": [{
"name": "Branch 2.1"
}, {
"name": "Branch 2.2",
"children": [{
"name": "Branch 2.2.1"
}, {
"name": "Branch 2.2.2"
}]
}]
}, {
"name": "Branch 3"
}, {
"name": "Branch 4",
"children": [{
"name": "Branch 4.1"
}, {
"name": "Branch 4.2"
}]
}, {
"name": "Branch 5"
}]
};
var link, node;
var svg = d3.select("svg"),
width = +svg.attr("width"),
height = +svg.attr("height"),
g = svg.append("g");
// Setting up the simulation
var simulation = d3.forceSimulation()
// add linking force (empty for now)
.force("link", d3.forceLink())
// add repelling charge, defaults to -30
.force("charge", d3.forceManyBody())
// add force towards center
.force("center", d3.forceCenter(width / 2, height / 2))
// call ticked for every simulation tick
.on("tick", ticked);
root = d3.hierarchy(data);
run()
function run() {
// Add nodes to the simulation
simulation
.nodes(root.descendants())
// Add link constraints to the simulation
simulation.force("link")
.links(root.links())
.distance(40)
.strength(0.2);
simulation.force("charge")
.strength(-100);
// Select nodes
node = g.selectAll(".node")
.data(root.descendants())
.enter()
.append("g")
.attr("class", "node")
// Add node SVG circle
node.append("circle")
.attr("r", 4)
// Add node SVG text
node.append("text")
.attr("dy", 3)
.attr("x", function(d) {
return d.children ? -8 : 8;
})
.style("text-anchor", function(d) {
return d.children ? "end" : "start";
})
.text(function(d) {
return d.data.name;
});
// Create SVG links
link = g.selectAll(".link")
.data(root.links())
.enter()
.append("line")
.attr("class", "link")
.attr("stroke-width", "2px")
.attr("stroke", "#ddd")
.attr("x1", function(d) {
return d.source.x;
})
.attr("y1", function(d) {
return d.source.y;
})
.attr("x2", function(d) {
return d.target.x;
})
.attr("y2", function(d) {
return d.target.y;
});
}
// Function for updating node and link SVG positions
function ticked() {
link
.attr("x1", function(d) {
return d.source.x;
})
.attr("y1", function(d) {
return d.source.y;
})
.attr("x2", function(d) {
return d.target.x;
})
.attr("y2", function(d) {
return d.target.y;
});
node
.attr("transform", function(d) {
return "translate(" + d.x + ", " + d.y + ")";
});
}
<svg width="500" height="500"></svg>
line {
stroke: #666;
}
.node {
pointer-events: all;
}
circle {
stroke: none;
stroke-width: 40px;
}
.node text {
font: 8px sans-serif;
}
External resources loaded into this fiddle: