Skip to content

Instantly share code, notes, and snippets.

@mbostock
Last active March 13, 2023 22:04
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 3 You must be signed in to fork a gist
  • Save mbostock/533daf20348023dfdd76 to your computer and use it in GitHub Desktop.
Save mbostock/533daf20348023dfdd76 to your computer and use it in GitHub Desktop.
Link Nodes by Name
license: gpl-3.0

This example shows how to link nodes in a force-directed graph using a named identifier rather than a numeric index.

{
"nodes": [
{"id": "red"},
{"id": "orange"},
{"id": "yellow"},
{"id": "green"},
{"id": "blue"},
{"id": "violet"}
],
"links": [
{"source": "red", "target": "yellow"},
{"source": "red", "target": "blue"},
{"source": "red", "target": "green"}
]
}
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.node {
stroke: #000;
stroke-width: 1.5px;
}
.link {
stroke: #999;
stroke-width: 1.5px;
}
</style>
<svg width="960" height="500"></svg>
<script src="//d3js.org/d3.v4.min.js"></script>
<script>
var svg = d3.select("svg"),
width = +svg.attr("width"),
height = +svg.attr("height");
var simulation = d3.forceSimulation()
.force("charge", d3.forceManyBody().strength(-200))
.force("link", d3.forceLink().id(function(d) { return d.id; }).distance(40))
.force("x", d3.forceX(width / 2))
.force("y", d3.forceY(height / 2))
.on("tick", ticked);
var link = svg.selectAll(".link"),
node = svg.selectAll(".node");
d3.json("graph.json", function(error, graph) {
if (error) throw error;
simulation.nodes(graph.nodes);
simulation.force("link").links(graph.links);
link = link
.data(graph.links)
.enter().append("line")
.attr("class", "link");
node = node
.data(graph.nodes)
.enter().append("circle")
.attr("class", "node")
.attr("r", 6)
.style("fill", function(d) { return d.id; });
});
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("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; });
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment