Ajouter l'étiquette de texte au nœud d3 dans le diagramme dirigé par force et redimensionner le survoltage

J'essaie d'ajouter l'étiquette de texte aux noeuds dans d3 Force Directed Graph, il semble y avoir un problème. C'est mon violon :

Entrez la description de l'image ici

Lorsque j'ajoute le nom de nœud comme ceci:

node.append("text") .attr("class", "word") .attr("dy", ".35em") .text(function(d) { console.log(d.name); return d.name; });

Il n'y a pas de changement, mais les noms sont enregistrés.

Lorsque j'ai essayé d'utiliser la zone de délimitation , les étiquettes des noeuds sont apparues, mais les noeuds sont empilés dans le coin supérieur gauche de la boîte tandis que les liens des noeuds sont bien. Cette violon est le résultat de cet effort que j'ai mis. Quelqu'un peut-il me dire ce que je suis? Je me trompe

Vous ajoutez un élément de texte dans un cercle, cela ne fonctionnera pas. Vous pouvez ajouter des groupes sous l'élément svg, puis ajouter le cercle et un texte dans chaque groupe:

 // Create the groups under svg var gnodes = svg.selectAll('g.gnode') .data(graph.nodes) .enter() .append('g') .classed('gnode', true); // Add one circle in each group var node = gnodes.append("circle") .attr("class", "node") .attr("r", 5) .style("fill", function(d) { return color(d.group); }) .call(force.drag); // Append the labels to each group var labels = gnodes.append("text") .text(function(d) { return d.name; }); force.on("tick", function() { // Update the links 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; }); // Translate the groups gnodes.attr("transform", function(d) { return 'translate(' + [dx, dy] + ')'; }); });

Une fourchette de votre violon avec cette stratégie est ici