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

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

enter image description here

Когда я добавляю имя node следующим образом:

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

Нет изменений, но имена регистрируются.

Когда я попытался использовать ограничивающий прямоугольник, появились метки node, но узлы были уложены вверху в верхнем левом углу окна, а ссылки node в порядке. Это fiddle является результатом этого усилия, которое я вставляю. Может ли кто-нибудь сказать мне, что я делаю неправильно?

Ответы

Ответ 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] + ')'; 
  });    

});

Вилка вашей скрипки с этой стратегией здесь