Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
Force-based label placement
license: apache-2.0

A small demo of a pleasant, yet simple label placement algorithm for densely packed visualizations. The basic idea is to have labels orbit around their target node at a fixed distance, but repeal each other, so that they don't overlap, and orient themselves to the outside of clusters. To support that, labels on the right of their target node are left-aligned, and labels on the left of their target node are right-aligned; in between, we interpolate. In this example, one force layout governs the node placement, and the second one the label placement, but of course, the node placement could be computed by any other algorithm.

I first used this label placement in the MPG research networks project and owe the basic idea to Cedric Kiefer.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="en">
<meta charset="utf-8">
<title>Force based label placement</title>
<script type="text/javascript" src=""></script>
<script type="text/javascript" src=""></script>
<script type="text/javascript" src=""></script>
<script type="text/javascript" charset="utf-8">
var w = 960, h = 500;
var labelDistance = 0;
var vis ="body").append("svg:svg").attr("width", w).attr("height", h);
var nodes = [];
var labelAnchors = [];
var labelAnchorLinks = [];
var links = [];
for(var i = 0; i < 30; i++) {
var node = {
label : "node " + i
node : node
node : node
for(var i = 0; i < nodes.length; i++) {
for(var j = 0; j < i; j++) {
if(Math.random() > .95)
source : i,
target : j,
weight : Math.random()
source : i * 2,
target : i * 2 + 1,
weight : 1
var force = d3.layout.force().size([w, h]).nodes(nodes).links(links).gravity(1).linkDistance(50).charge(-3000).linkStrength(function(x) {
return x.weight * 10
var force2 = d3.layout.force().nodes(labelAnchors).links(labelAnchorLinks).gravity(0).linkDistance(0).linkStrength(8).charge(-100).size([w, h]);
var link = vis.selectAll("").data(links).enter().append("svg:line").attr("class", "link").style("stroke", "#CCC");
var node = vis.selectAll("g.node").data(force.nodes()).enter().append("svg:g").attr("class", "node");
node.append("svg:circle").attr("r", 5).style("fill", "#555").style("stroke", "#FFF").style("stroke-width", 3);;
var anchorLink = vis.selectAll("line.anchorLink").data(labelAnchorLinks)//.enter().append("svg:line").attr("class", "anchorLink").style("stroke", "#999");
var anchorNode = vis.selectAll("g.anchorNode").data(force2.nodes()).enter().append("svg:g").attr("class", "anchorNode");
anchorNode.append("svg:circle").attr("r", 0).style("fill", "#FFF");
anchorNode.append("svg:text").text(function(d, i) {
return i % 2 == 0 ? "" : d.node.label
}).style("fill", "#555").style("font-family", "Arial").style("font-size", 12);
var updateLink = function() {
this.attr("x1", function(d) {
return d.source.x;
}).attr("y1", function(d) {
return d.source.y;
}).attr("x2", function(d) {
}).attr("y2", function(d) {
var updateNode = function() {
this.attr("transform", function(d) {
return "translate(" + d.x + "," + d.y + ")";
force.on("tick", function() {
anchorNode.each(function(d, i) {
if(i % 2 == 0) {
d.x = d.node.x;
d.y = d.node.y;
} else {
var b = this.childNodes[1].getBBox();
var diffX = d.x - d.node.x;
var diffY = d.y - d.node.y;
var dist = Math.sqrt(diffX * diffX + diffY * diffY);
var shiftX = b.width * (diffX - dist) / (dist * 2);
shiftX = Math.max(-b.width, Math.min(0, shiftX));
var shiftY = 5;
this.childNodes[1].setAttribute("transform", "translate(" + shiftX + "," + shiftY + ")");

This comment has been minimized.

Copy link

@lapidus lapidus commented Nov 22, 2011

Dear Moritz,

This is really useful!
I have also tried using d3 force layouts for label placement (with a lesser degree of success ;) ).
I had a question on Stackoverflow regarding this a while ago:

Before playing around with your code, what do you think about using it for scatter chart label placement?



This comment has been minimized.

Copy link
Owner Author

@MoritzStefaner MoritzStefaner commented Nov 22, 2011


This comment has been minimized.

Copy link

@patrickdrouin patrickdrouin commented Sep 7, 2012

Hello. This demo looks like it could do exactly what I'm looking for... Being new to Javascript, I'm not sure how to rewrite this demo to load data from a file like the Force Directed Graph does. Can anybody come up with any hints? Thanks for making this available.


This comment has been minimized.

Copy link

@dreadstar dreadstar commented Oct 2, 2014

First, thank you for sharing this example. I looked through the code and your explanation at
I am confused as to why you repeat the push to the labelAnchors 2x in lines 28-33? I am trying to adapt your solution for a genealogy program with different types of nodes and floating labels on the nodes for people.


Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.