向Hobbelt的“组/捆节点”中的节点添加标签D3力布局示例？ [英] Add labels to nodes in Hobbelt's "Group/Bundle Nodes" D3 force layout example?

问题描述

我调整了Ger Hobbelt的群组/程式集节点的优秀范例
https：//gist.github .com / GerHobbelt / 3071239

I adapted Ger Hobbelt's excellent example of group/bundle nodes https://gist.github.com/GerHobbelt/3071239

作为JSFiddle：

as a JSFiddle here:

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

显示展示了可折叠的节点和区域（外壳）。

The display demonstrates both collapsible nodes and regions (hulls).

一个调整我的是如何添加标签到扩展节点。我已经成功地添加标签到我的其他力网络图中的节点使用类似的代码：

The one tweak that eludes me is how to add labels to expanded nodes. I have successfully added labels to nodes in my other force network diagrams using code similar to:

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的例子来指导我朝着正确的方向？

Is anyone familiar enough with Ger's example to guide me in the right direction?

推荐答案

在输入，而不是添加 circle $ c> g 与圆和文本。然后重新定义一个位来修复 g 的移动，而不是圆。最后，追加写出 .text（）只有当节点有一个名字（意思是一个叶子）：

On enter, instead of appending circle append a g with a circle and a text. Then re-factor a bit to fix the movement of the g instead of the circle. Finally, append write out the .text() only if the node has a name (meaning it's a leaf):

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：

And refactored tick to use g instead of circle:

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

已更新小提琴。

这篇关于向Hobbelt的“组/捆节点”中的节点添加标签D3力布局示例？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！