Comment ajouter des étiquettes à d3.js graphique à bulles force

Question

J'essaie de modifier ce code bl.ocks.org/mbostock/7881887 afin que je puisse utiliser la technique pour montrer un nuage de mots où la taille du cercle serait par rapport au non des mots dans un fichier mais mon principal problème à l'heure actuelle de savoir comment ajouter du texte aux cercles en premier lieu. De manière attrayante, je peux voir ce qui ressemble à une fonction qui le fait dans le code ... node.append ("text")? J'ai donc supposé que je serais en mesure d'ajouter une valeur "nom" à "d" dans la fonction des noeuds et nous irions loin. Comme vous pouvez le voir, je viens d'ajouter un nom: text où text = "Test" à d. Toute aide pour obtenir n'importe quel texte à apparaître dans ou près de ces cercles serait très grandement appréciée! Je suis nouveau D3 comme vous pouvez probablement le dire et j'ai passé de nombreuses soirées sur Google pour trouver rien du tout. Je peux voir des exemples sur un autre type de graphique ... la mise en vigueur par exemple http://bl.ocks.org/mbostock/1093130 mais ils semblent si différents que je ne peux pas demander un à l'autre :-(

voici mon jsFiddle https://jsfiddle.net/TimBrighton/vn7reroe/1/

var width = 960, 
    height = 500, 
    padding = 1.5, // separation between same-color nodes 
    clusterPadding = 6, // separation between different-color nodes 
    maxRadius = 12; 

var n = 100, // total number of nodes 
    m = 5; // number of distinct clusters 

var color = d3.scale.category10() 
    .domain(d3.range(m)); 

// The largest node for each cluster. 
var clusters = new Array(m); 

var nodes = d3.range(n).map(function() { 
    test="Test"; 
    var i = Math.floor(Math.random() * m), 
     r = Math.sqrt((i + 1)/m * -Math.log(Math.random())) * maxRadius,  
     d = { 
     name: test, 
     cluster: i, 
     radius: r, 
     name: "test", 
     x: Math.cos(i/m * 2 * Math.PI) * 200 + width/2 + Math.random(), 
     y: Math.sin(i/m * 2 * Math.PI) * 200 + height/2 + Math.random() 
     }; 
    if (!clusters[i] || (r > clusters[i].radius)) clusters[i] = d; 
    console.log(d.name); 
    return d; 

}); 

var force = d3.layout.force() 
    .nodes(nodes) 
    .size([width, height]) 
    .gravity(.02) 
    .charge(0) 
    .on("tick", tick) 
    .start(); 

var svg = d3.select("body").append("svg") 
    .attr("width", width) 
    .attr("height", height); 

var node = svg.selectAll("circle") 
    .data(nodes) 
    .enter().append("circle") 
    .style("fill", function(d) { return color(d.cluster); }) 
    .call(force.drag); 


node.append("text") 
.text(function(d) { return d.name; }) 
    // .style("font-size", function(d) { return Math.min(2 * d.r, (2 * d.r - 8)/this.getComputedTextLength() * 24) + "px"; }) 
    //.attr("dy", ".35em"); 

    .attr("dx", 10) 
    .attr("dy", ".35em") 
    .text(function(d) { return d.name }) 
    .style("stroke", "gray"); 

node.transition() 
    .duration(750) 
    .delay(function(d, i) { return i * 5; }) 
    .attrTween("r", function(d) { 
     var i = d3.interpolate(0, d.radius); 
     return function(t) { return d.radius = i(t); }; 
    }); 




function tick(e) { 
    node 
     .each(cluster(10 * e.alpha * e.alpha)) 
     .each(collide(.5)) 
     .attr("cx", function(d) { return d.x; }) 
     .attr("cy", function(d) { return d.y; }); 
} 

// Move d to be adjacent to the cluster node. 
function cluster(alpha) { 
    return function(d) { 
    var cluster = clusters[d.cluster]; 
    if (cluster === d) return; 
    var x = d.x - cluster.x, 
     y = d.y - cluster.y, 
     l = Math.sqrt(x * x + y * y), 
     r = d.radius + cluster.radius; 
    if (l != r) { 
     l = (l - r)/l * alpha; 
     d.x -= x *= l; 
     d.y -= y *= l; 
     cluster.x += x; 
     cluster.y += y; 
    } 
    }; 
} 

// Resolves collisions between d and all other circles. 
function collide(alpha) { 
    var quadtree = d3.geom.quadtree(nodes); 
    return function(d) { 
    var r = d.radius + maxRadius + Math.max(padding, clusterPadding), 
     nx1 = d.x - r, 
     nx2 = d.x + r, 
     ny1 = d.y - r, 
     ny2 = d.y + r; 
    quadtree.visit(function(quad, x1, y1, x2, y2) { 
     if (quad.point && (quad.point !== d)) { 
     var x = d.x - quad.point.x, 
      y = d.y - quad.point.y, 
      l = Math.sqrt(x * x + y * y), 
      r = d.radius + quad.point.radius + (d.cluster === quad.point.cluster ? padding : clusterPadding); 
     if (l < r) { 
      l = (l - r)/l * alpha; 
      d.x -= x *= l; 
      d.y -= y *= l; 
      quad.point.x += x; 
      quad.point.y += y; 
     } 
     } 
     return x1 > nx2 || x2 < nx1 || y1 > ny2 || y2 < ny1; 
    }); 
    }; 
} 

Answer 1

vous ajoutez les DOM TEXT avec dans les DOM cercle.

C'est la raison pour laquelle vous ne voyez pas le texte.

<circle cx="331.0297405069362" cy="238.4899367858363" style="fill: rgb(255, 127, 14);" r="24.842603758681765"> 
    <text dx="10" dy=".35em" style="stroke: gray;">test</text> 
</circle> 

Ceci est inc orrect.

La méthode correcte consiste à ajouter un cercle et du texte à un groupe. Comme ceci:

<g transform="translate(402.3818560847106,240.01473655622326)"> 
    <circle r="31.769893912794977" style="fill: rgb(255, 127, 14);"> </circle> 
    <text dx="-10" dy=".35em" style="stroke: gray;">test</text> 
</g> 

Donc, pour ce faire d'abord vous faire des groupes comme ceci:

var node = svg.selectAll("circle") 
    .data(nodes) 
    .enter().append("g").call(force.drag); 

Ajouter cercle au groupe:

node.append("circle") 
    .style("fill", function (d) { 
    return color(d.cluster); 
}).attr("r", function(d){return d.radius}) 

Ajouter texte au groupe

//add text to the group  
node.append("text") 
    .text(function (d) { 
    return d.name; 
}) 
.attr("dx", -10) 
    .attr("dy", ".35em") 
    .text(function (d) { 
    return d.name 
}) 
    .style("stroke", "gray"); 

Inside e la fonction tique au lieu de mettre à jour la cy cx du cercle que nous devons déplacer le groupe complet si l'utilisation se transforme comme thsi:

function tick(e) { 
    node.each(cluster(10 * e.alpha * e.alpha)) 
     .each(collide(.5)) 
    //.attr("transform", functon(d) {}); 
    .attr("transform", function (d) { 
     var k = "translate(" + d.x + "," + d.y + ")"; 
     return k; 
    }) 

} 

Code de travail here.