Platzieren von Beschriftungen in der Mitte von Knoten in d3.js

Question

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

Ich kann das gewünschte Ergebnis visuell erzeugen, aber die Art, wie ich es gemacht habe, ist kaum optimal, da es die x-y-Koordinaten für jedes Textelement fest codiert. 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; 
       }); 

Die node Klasse benutzerdefinierte CSS-Klasse-I getrennt für die circle Elemente definiert haben, während Klassen nodes und labels nicht explizit definiert und sie von diesem answer entlehnt sind.

Wie zu sehen ist, ist die Positionierung jedes Textlabels fest codiert, so dass es in der Mitte jedes Knotens erscheint. Offensichtlich ist dies nicht die richtige Lösung.

Meine Frage ist, wie sollte ich jede Textbeschriftung korrekt jedem Knoten-Kreis dynamisch zuordnen, so dass sich die Positionierung einer Beschriftung automatisch mit der eines Kreises ändert. Konzeptuelle Erklärungen sind mit Codebeispielen sehr willkommen.

Answer 1

Das Attribut text-anchor funktioniert wie erwartet auf einem von D3 erstellten Svg-Element. Sie müssen jedoch die text und die circle an ein gemeinsames g Element anhängen, um sicherzustellen, dass die text und die circle miteinander zentriert sind.

var nodes = svg.append("g") 
      .attr("class", "nodes") 
      .selectAll("circle") 
      .data(dataset) 
      .enter() 
      // Add one g element for each data node here. 
      .append("g") 
      // Position the g element like the circle element used to be. 
      .attr("transform", function(d, i) { 
      // Set d.x and d.y here so that other elements can use it. d is 
      // expected to be an object here. 
      d.x = i * 70 + 50, 
      d.y = svg_h/2; 
      return "translate(" + d.x + "," + d.y + ")"; 
      }); 

Beachten Sie, dass die dataset ist jetzt eine Liste der Objekte, so dass d.y und d.x können, anstatt nur eine Liste von Zeichenketten verwendet werden:

Um dies zu tun, können Sie Ihre nodes Variablen ändern.

Dann ersetzen Sie circle und text append Code mit dem folgenden:

// Add a circle element to the previously added g element. 
nodes.append("circle") 
     .attr("class", "node") 
     .attr("r", 20); 

// Add a text element to the previously added g element. 
nodes.append("text") 
    .attr("text-anchor", "middle") 
    .text(function(d) { 
     return d.name; 
     }); 

Statt nun die Position des sich ändernden circle Sie die Position des g Elements ändern, die sowohl die circle bewegt und die text .

Hier ist eine JSFiddle zeigt zentrierten Text auf Kreise.

Wenn Sie Ihren Text in einem separaten g Elemente haben, so dass es immer oben angezeigt wird, dann die Schöpfung in dem ersten g Elemente gesetzt d.x und d.y Werte verwenden Sie den Text zu transform.

var text = svg.append("svg:g").selectAll("g") 
     .data(force.nodes()) 
     .enter().append("svg:g"); 

text.append("svg:text") 
    .attr("text-anchor", "middle") 
    .text(function(d) { return d.name; }); 

text.attr("transform", function(d) { 
     return "translate(" + d.x + "," + d.y + ")"; 
    }); 

Answer 2

Diese Seite describes what's going on under the svg hood, wenn es um Textelemente geht. Das Verständnis der zugrunde liegenden Maschinen und Datenstrukturen half mir dabei, besser zu verstehen, wie ich meinen Code ändern musste, damit er funktionierte.

Answer 3

Die beste Antwort came from the asker sich:

nur eine weitere Beobachtung: mit nur.attr ("text-anchor", "middle") für jedes Textelement ist das Label in der Mitte horizontal, aber leicht vertikal abgesetzt. Ich reparierte das durch Hinzufügen von attr ("y", ".3em") (entlehnt von Beispielen auf der Website d3.js), was gut zu funktionieren scheint sogar für beliebige Größe des Knotenkreises. Was genau dieses zusätzliche Attribut tut, entzieht sich meinem Verständnis. Sicher, es tut etwas an der Y-Koordinate jedes Textelements, aber warum .3em in insbesondere? Es scheint fast magisch zu mir ...

Fügen Sie einfach .attr("text-anchor", "middle") zu jedem Textelement hinzu.

Beispiel:

node.append("text") 
    .attr("x", 0) 
    .attr("dy", ".35em") 
    .attr("text-anchor", "middle") 
    .text(function(d) { return d.name; });