Добавить ярлыки к узлам в узлах «Группы/связки узлов» Hobbelt «Пример компоновки D3»?

Question

Я приспособил отличный пример Ger Hobbelt в групповых/пучка узлов https://gist.github.com/GerHobbelt/3071239

как JSFiddle здесь:

https://jsfiddle.net/NovasTaylor/tco2fkad/

Дисплей демонстрирует как разборные узлы и регионы (шелухи).

Одна настройка, которая ускользает от меня, - это добавить ярлыки к расширенным узлам. Я успешно добавлены метки к узлам в других моих сил сетевых диаграмм, используя код, аналогичный:

nodes.append("text") 
    .attr("class", "nodetext") 
    .attr("dx", 12) 
    .attr("dy", ".35em") 
    .text(function(d) { 
     // d.name is a label for the node, present in the JSON source 
     return d.name; 
    }); 

ли кто достаточно хорошо знаком с примером GER, чтобы вести меня в правильном направлении?

Answer 1

Включить, а не добавлять circle добавить g с circle и text. Затем переформатируйте бит, чтобы зафиксировать движение g вместо circle. Наконец, добавьте выписывать .text() только если узел имеет имя (это означает, что это лист):

node = nodeg.selectAll("g.node").data(net.nodes, nodeid); 
node.exit().remove(); 
var onEnter = node.enter(); 
var g = onEnter 
    .append("g") 
    .attr("class", function(d) { return "node" + (d.size?"":" leaf"); }) 
    .attr("transform", function(d) { 
     return "translate(" + d.x + "," + d.y + ")"; 
    }); 
g.append("circle") 
    // if (d.size) -- d.size > 0 when d is a group node.  
    .attr("r", function(d) { return d.size ? d.size + dr : dr+1; }) 
    .style("fill", function(d) { return fill(d.group); }) 
    .on("click", function(d) { 
    expand[d.group] = !expand[d.group]; 
    init(); 
    }); 
g.append("text") 
    .attr("fill","black") 
    .text(function(d,i){ 
    if (d['name']){   
     return d['name']; 
    } 
}); 

И рефакторинга клеща использовать g вместо круга:

node.attr("transform", function(d) { 
    return "translate(" + d.x + "," + d.y + ")"; 
}); 

Обновлено fiddle.