web-dev-qa-db-fra.com

Ajouter une étiquette de texte au nœud d3 dans le graphique dirigé par la force et redimensionner au survol

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

enter image description here

Lorsque j'ajoute le nom du 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 aucun changement mais les noms sont enregistrés.

Lorsque j'ai essayé d'utiliser la boîte englobante , les étiquettes des nœuds sont apparues mais les nœuds sont empilés dans le coin supérieur gauche de la boîte tandis que les liens de nœuds sont très bien. Ce violon est le résultat de cet effort que j'ai fait. Quelqu'un peut-il me dire ce que je fais mal?

javascriptsvgd3.jslabelforce-layout
35
Aditya

Vous ajoutez un élément de texte à l'intérieur d'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(' + [d.x, d.y] + ')'; 
  });    

});

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

54
Pablo Navarro