Добавить текстовую метку к узлу d3 в силовом направлении График и изменить размер при наведении

Question

Я пытаюсь добавить текстовую метку к узлам в диаграмме с плавающей запятой d3, похоже, проблема. Это мой Fiddle:

Когда я добавляю имя узла, как это:

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

Там нет никаких изменений, но имена становятся вошли.

Когда я попытался использовать bounding box, появились метки узлов, но узлы уложены вверху в верхнем левом углу окна, в то время как ссылки на узлы прекрасны. Это fiddle является результатом этого усилия, которое я вставляю. мне, что я делаю неправильно?

Answer 1

Вы добавляете текстовый элемент в круг, который не будет работать. Вы можете добавлять группы под элементом SVG, а затем добавьте круг и текст в каждой группе:

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

}); 

Вилком вашей скрипки с этой стратегией является here