D3js: Automatique des étiquettes de placement pour éviter les chevauchements? (force de répulsion)

Une option est d'utiliser le la force de mise en page avec de multiples foyers. Chaque foyers doit être situé dans le centre de gravité, mis en place l'étiquette pour être attiré que par les foyers. De cette façon, chaque étiquette aura tendance à être près de la fonctionnalité du centre de gravité, mais la répulsion avec d'autres étiquettes peuvent éviter les problèmes de chevauchement.

Pour la comparaison:

• M. Bostock est "Permet de Faire une Carte" tutoriel (carte),
• mon gist pour un Automatique des Étiquettes de Placement version (carte) la mise en œuvre des foyers de la stratégie.

Le code:

//Place and label location
var foci = [],
labels = [];
//Store the projected coordinates of the places for the foci and the labels
places.features.forEach(function(d, i) {
var c = projection(d.geometry.coordinates);
foci.push({x: c[0], y: c[1]});
labels.push({x: c[0], y: c[1], label: d.properties.name})
});
//Create the force layout with a slightly weak charge
var force = d3.layout.force()
.nodes(labels)
.charge(-20)
.gravity(0)
.size([width, height]);
//Append the place labels, setting their initial positions to
//the feature's centroid
var placeLabels = svg.selectAll('.place-label')
.data(labels)
.enter()
.append('text')
.attr('class', 'place-label')
.attr('x', function(d) { return d.x; })
.attr('y', function(d) { return d.y; })
.attr('text-anchor', 'middle')
.text(function(d) { return d.label; });
force.on("tick", function(e) {
var k = .1 * e.alpha;
labels.forEach(function(o, j) {
//The change in the position is proportional to the distance
//between the label and the corresponding place (foci)
o.y += (foci[j].y - o.y) * k;
o.x += (foci[j].x - o.x) * k;
});
//Update the position of the text element
svg.selectAll("text.place-label")
.attr("x", function(d) { return d.x; })
.attr("y", function(d) { return d.y; });
});
force.start();

Vous pourriez être intéressé par le d3fc-étiquette de mise en page composant (par D3v5) qui est conçu exactement pour ce but. Le composant fournit un mécanisme pour organiser enfant composantes en fonction de leurs rectangulaire boîtes englobantes. Vous pouvez appliquer une gourmande ou le recuit simulé, la stratégie afin de minimiser les chevauchements.

Voici un extrait de code qui montre comment appliquer cette mise en forme de la composante de Mike Bostock de la carte exemple:

const labelPadding = 2;
//the component used to render each label
const textLabel = layoutTextLabel()
.padding(labelPadding)
.value(d => d.properties.name);
//a strategy that combines simulated annealing with removal
//of overlapping labels
const strategy = layoutRemoveOverlaps(layoutGreedy());
//create the layout that positions the labels
const labels = layoutLabel(strategy)
.size((d, i, g) => {
//measure the label and add the required padding
const textSize = g[i].getElementsByTagName('text')[0].getBBox();
return [textSize.width + labelPadding * 2, textSize.height + labelPadding * 2];
})
.position(d => projection(d.geometry.coordinates))
.component(textLabel);
//render!
svg.datum(places.features)
.call(labels);

Et c'est une petite capture d'écran du résultat:

Vous pouvez voir un exemple complet ici:

http://bl.ocks.org/ColinEberhardt/389c76c6a544af9f0cab

Divulgation: tel Que discuté dans les commentaires ci dessous, je suis un collaborateur principal de ce projet, donc, clairement, je suis un peu biaisé. Plein crédit pour les autres réponses à cette question qui nous a donné de l'inspiration!

Pour le cas 2D
voici quelques exemples de quelque chose de très similaire:

un http://bl.ocks.org/1691430

deux http://bl.ocks.org/1377729

merci Alexandre Skaburskis qui dit cela ici

Pour le cas 1D
Pour ceux qui recherche une solution à un problème similaire en 1-D, je peux partager mon bac à sable JSfiddle où j'ai essayer de le résoudre. C'est loin d'être parfait, mais il sorte de faire la chose.

Gauche: Le modèle de sandbox, à Droite: un exemple d'utilisation

Voici l'extrait de code que vous pouvez courir en appuyant sur le bouton à l'extrémité de la poste, et aussi le code lui-même. Lors de l'exécution, cliquez sur le champ à la position fixe de nœuds.

JS:

var width = 700,
height = 500;
var mouse = [0,0];
var force = d3.layout.force()
.size([width*2, height])
.gravity(0.05)
.chargeDistance(30)
.friction(0.2)
.charge(function(d){return d.fixed?0:-1000})
.linkDistance(5)
.on("tick", tick);
var drag = force.drag()
.on("dragstart", dragstart);
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
.on("click", function(){
mouse = d3.mouse(d3.select(this).node()).map(function(d) {
return parseInt(d);
});
graph.links.forEach(function(d,i){
var rn = Math.random()*200 - 100;
d.source.fixed = true; 
d.source.px = mouse[0];
d.source.py = mouse[1] + rn;
d.target.y = mouse[1] + rn;
})
force.resume();
d3.selectAll("circle").classed("fixed", function(d){ return d.fixed});
});
var link = svg.selectAll(".link"),
node = svg.selectAll(".node");
var graph = {
"nodes": [
{"x": 469, "y": 410},
{"x": 493, "y": 364},
{"x": 442, "y": 365},
{"x": 467, "y": 314},
{"x": 477, "y": 248},
{"x": 425, "y": 207},
{"x": 402, "y": 155},
{"x": 369, "y": 196},
{"x": 350, "y": 148},
{"x": 539, "y": 222},
{"x": 594, "y": 235},
{"x": 582, "y": 185}
],
"links": [
{"source":  0, "target":  1},
{"source":  2, "target":  3},
{"source":  4, "target":  5},
{"source":  6, "target":  7},
{"source":  8, "target":  9},
{"source":  10, "target":  11}
]
}
function tick() {
graph.nodes.forEach(function (d) {
if(d.fixed) return;
if(d.x<mouse[0]) d.x = mouse[0]
if(d.x>mouse[0]+50) d.x--
})
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; });
}
function dblclick(d) {
d3.select(this).classed("fixed", d.fixed = false);
}
function dragstart(d) {
d3.select(this).classed("fixed", d.fixed = true);
}
force
.nodes(graph.nodes)
.links(graph.links)
.start();
link = link.data(graph.links)
.enter().append("line")
.attr("class", "link");
node = node.data(graph.nodes)
.enter().append("circle")
.attr("class", "node")
.attr("r", 10)
.on("dblclick", dblclick)
.call(drag);

CSS:

.link {
stroke: #ccc;
stroke-width: 1.5px;
}
.node {
cursor: move;
fill: #ccc;
stroke: #000;
stroke-width: 1.5px;
opacity: 0.5;
}
.node.fixed {
fill: #f00;
}

HTML:

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<body></body>