在 Hobbelt 的“Group/Bundle Nodes”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而是附加帶有circle和text的g 。 然后重新考慮一下以修復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而不是 circle：

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

更新了小提琴。