Ich beginne mit d3.js und versuche, eine Reihe von Knoten zu erstellen, von denen jeder eine zentrierte Nummernbezeichnung enthält.

Ich bin in der Lage, das gewünschte Ergebnis visuell zu erzielen, aber die Art und Weise, wie ich es gemacht habe, ist kaum optimal, da die x-y-Koordinaten für jedes Textelement hartcodiert werden müssen. Unten ist der Code:

var svg_w = 800;
var svg_h = 400;
var svg = d3.select("body")
    .append("svg")
    .attr("width", svg_w)
    .attr("weight", svg_h);

var dataset = [];
for (var i = 0; i < 6; i++) {
    var datum = 10 + Math.round(Math.random() * 20);
    dataset.push(datum);
}

var nodes = svg.append("g")
               .attr("class", "nodes")
               .selectAll("circle")
               .data(dataset)
               .enter()
               .append("circle")
               .attr("class", "node")
               .attr("cx", function(d, i) {
                   return (i * 70) + 50;
               })
               .attr("cy", svg_h / 2)
               .attr("r", 20);

var labels = svg.append("g")
                .attr("class", "labels")
                .selectAll("text")
                .data(dataset)
                .enter()
                .append("text")
                .attr("dx", function(d, i) {
                    return (i * 70) + 42
                })
                .attr("dy", svg_h / 2 + 5)
                .text(function(d) {
                    return d;
                });

Dasnode class ist eine benutzerdefinierte CSS-Klasse, die ich separat für die definiert habecircle Elemente, während Klassennodes undlabels sind nicht explizit definiert und entlehntAntworten.

Wie zu sehen ist, ist die Position jeder Textbeschriftung fest codiert, sodass sie in der Mitte jedes Knotens angezeigt wird. Offensichtlich ist dies nicht die richtige Lösung.

Meine Frage ist, wie ich jedes Textetikett dynamisch mit jedem Knotenkreis verknüpfen soll, damit sich die Position eines Etiketts mit der eines Kreises automatisch ändert. Konzeptionelle Erklärungen sind mit Codebeispielen äußerst willkommen.