Kuvvet yönelimli Grafik'te d3 düğümündeki metin etiketini ekleyin ve üzerine gelini yeniden boyutlandırın

Question

d3 Force Directed Graph'da düğümlere metin etiketi eklemeye çalışıyorum, bir sorun var gibi görünüyor. Bu benim Fiddle geçerli:

böyle düğüm adını eklediğinizde: Orada

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

değişiklik yok ama isimler günlüğe alıyorsanız. i bounding box kullanarak çalıştığımızda

, düğüm etiketleri göründü ama düğüm bağlantılar fine.This fiddle i koymak bu çabaların sonucudur ise düğümler kutusunun sol üst köşesinde yukarıya dizilir. Herkes söyleyebilir ben neyi yanlış yapıyorum?

Answer 1

Çalışmayacak bir dairenin içine bir metin öğesi ekliyorsunuz. Sen svg elemanı altında grup eklemek ve ardından Çevreyi ve her grupta bir metin ekleyebilirsiniz:

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

}); 

bu strateji ile keman bir çatal Hemen hemen ne istediğini here