在 Hobbelt 的 "Group/Bundle Nodes" D3 强制布局示例中向节点添加标签？

Question

我改编了 Ger Hobbelt 的 group/bundle 节点的优秀示例 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。

在 Hobbelt 的 "Group/Bundle Nodes" D3 强制布局示例中向节点添加标签？

Add labels to nodes in Hobbelt's "Group/Bundle Nodes" D3 force layout example?

javascript

svg

label

d3.js

force-layout