Placer les étiquettes au centre de nœuds d3.js

Je commence avec d3.js et suis en train de créer une ligne de nœuds qui contiennent chacun une centrée sur l'étiquette du numéro.

Je suis en mesure de produire le résultat désiré visuellement, mais la façon dont je l'ai fait, il n'est guère optimale car elle implique le codage en dur des coordonnées x-y pour chaque élément de texte. Ci-dessous le 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;
});

La node classe est de coutume de classe CSS que j'ai défini séparément pour les circle éléments, tandis que les classes nodes et labels ne sont pas explicitement définis et ils sont empruntés à partir de ce réponse.

Comme on le voit, la position de chaque étiquette de texte est codé en dur, de sorte qu'il apparaît au centre de chaque nœud. Évidemment, ce n'est pas la bonne solution.

Ma question est comment dois-je associer correctement chaque étiquette de texte à chaque nœud cercle de manière dynamique, de sorte que si le positionnement d'une modification de l'étiquetage ainsi que celle d'un cercle automatiquement. Conceptuel explication est extrêmement bienvenue avec le code exemple.

  • Texte des ancres semblent pas travailler directement en D3, mais avez-vous essayé quelque chose d'aussi simple que de CSS text-align? Ceci devrait faire l'affaire! w3schools.com/cssref/pr_text_text-align.asp essayez Également de prendre un coup d'oeil aux postes de ce type à partir de la d3 Groupe Google: groups.google.com/forum/#!searchin/d3-js/text-align/d3-js/...
  • Où avez-vous l'idée que le texte des ancres ne fonctionnent pas en d3?
  • il ya quelques mois ils n'ont pas travaillé...merci pour la clarification 🙂 sympa de voir une approche simple pour ce problème
InformationsquelleAutor skyork | 2012-08-08
  1. 62

    La texte d'ancre attribut fonctionne comme prévu sur un élément svg créé par D3. Cependant, vous devez ajouter le text et la circle dans une commune g élément pour s'assurer que le text et la circle sont centrés les uns avec les autres.

    Pour ce faire, vous pouvez modifier votre nodes variable:

    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 + ")"; 
});

    Noter que le dataset est maintenant une liste d'objets, de sorte que d.y et d.x peut être utilisé au lieu d'une liste de chaînes de caractères.

    Ensuite, remplacez votre circle et text append (avec le code suivant:

    //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;
});

    Maintenant, au lieu de changer la position de la circle vous changez la position de la g élément qui se déplace à la fois la circle et la text.

    Ici est un JSFiddle montrant le texte centré sur les cercles.

    Si vous souhaitez que votre texte soit dans un autre g élément de sorte qu'il apparaît toujours sur le dessus, puis utilisez le d.x et d.y valeurs définies dans la première g élément de la création de transform le texte.

    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 + ")"; 
});
    • merci pour la réponse! Il semble que votre approche est similaire à la première approche indiqué dans ce répondre, ce qui signifie que chaque étiquette doit être établi sur le dessus seulement pour son cercle, mais sera tiré sous d'autres cercles. Est-il possible de le faire en utilisant les deux-données-rejoignez l'approche exposée dans la même réponse? (qui est ce que j'ai modélisé ma tentative sur). Merci!
    • J'ai fait une mise à jour pour cela. Les deux principales choses que vous devez changer de vos données, une liste des objets, au lieu d'une liste de chaînes, de sorte que y et x peuvent être stockées pour chaque chaîne, et de mettre votre texte à l'intérieur d'un g élément de sorte que le g élément qui peut être transformée.
    • si j'ai bien compris votre code mis à jour ci-dessus correctement, vous devez d'abord créer un g éléments et à l'intérieur de laquelle vous créez une série de g éléments pour les données dans le tableau, puis vous créez text éléments à l'intérieur de chacun de ces g élément? Ce qui me confond un peu, c'est text.append("svg:text")..., ne text ici représente la série de g éléments? Si oui, comment faut-D3 créer un text élément chacun de ces g éléments? La syntaxe est un peu trompeur.
    • text représente la série de g éléments. Sous les couvertures de D3, le append méthodes sait faire un each quand on donne une liste d'éléments. Ainsi, le append est appliquée à chaque g élément dans la liste.
    • Voir github.com/mbostock/d3/wiki/Selections#wiki-each pour plus d'informations sur each. Plus précisément voir ce qu'il dit presque tous les autres opérateur utilise each sous les couvertures.
    • super! merci pour les éclaircissements et la réponse!
    • juste une autre observation: avec seulement .attr("text-anchor", "middle") pour chaque text élément, l'étiquette, qui est au milieu horizontalement mais légèrement décalé verticalement. J'ai résolu ce problème en ajoutant attr("y", ".3em") (à partir d'exemples empruntés à d3.js le site web), ce qui semble bien fonctionner, même de taille arbitraire de nœud de cercle. Cependant, exactement ce que cet attribut supplémentaire n'échappe à ma compréhension. Bien sûr, il fait quelque chose pour la coordonnée de chaque text élément, mais pourquoi .3em en particulier? Il semble presque magique pour moi...

    InformationsquelleAutor Brant Olsen
  2. 31

    La meilleure réponse est venu de la personne lui-même:

    juste une autre observation: avec seulement .attr("texte d'ancre", "moyen")
    pour chaque élément de texte, l'étiquette, qui est au milieu à l'horizontale, mais
    légèrement en dehors de la verticale. J'ai résolu ce problème en ajoutant attr("y", ".3em")
    (à partir d'exemples empruntés à d3.js le site web), ce qui semble bien fonctionner
    même de taille arbitraire de nœud de cercle. Cependant, exactement ce que ce
    attribut supplémentaire n'échappe à ma compréhension. Bien sûr, il n'
    quelque chose à la coordonnée de chaque élément de texte, mais pourquoi .3em en
    particulier? Il semble presque magique pour moi...

    Juste ajouter .attr("text-anchor", "middle") à chaque élément de texte.

    Exemple:

    node.append("text")
.attr("x", 0)
.attr("dy", ".35em")
.attr("text-anchor", "middle")
.text(function(d) { return d.name; });
    • Ignorer la réponse choisie. C'est de loin une meilleure approche.
    • Wow. Bonne chose, je défile vers le bas à la prochaine réponse. Ma paresse pour ne pas la lecture de la réponse choisie payé.
    • Tout en utilisant cela, mon HTML a le texte, mais il n'apparait pas dans mon nœud réel.
    InformationsquelleAutor tacone
  3. 4

    Cette page décrit ce qui se passe sous le capot svg quand il vient à des éléments de texte. Comprendre les sous-jacents des machines et des structures de données m'a aidé à obtenir un meilleur contrôle sur la façon dont j'ai dû modifier mon code pour qu'il fonctionne.

    InformationsquelleAutor MichaelGreene