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

Posted 2023-02-22

【中文标题】向 Hobbelt 的“Group/Bundle Nodes”D3 强制布局示例中的节点添加标签？

【英文标题】：Add labels to nodes in Hobbelt's "Group/Bundle Nodes" D3 force layout example?

【发布时间】：2015-05-04 08:29:46

【问题描述】：

我改编了 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 的示例足够熟悉，可以指导我朝着正确的方向前进？

【参考方案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。

【讨论】：

这正是我想要的，马克。我需要更多地阅读代码来理解它，然后看看我是否也可以将它应用到捆绑的节点上。

我根据自己的数据调整了您的代码，现在遇到了一个奇怪的问题。看到这个小提琴：jsfiddle.net/NovasTaylor/7yu2g1b2。展开橙色节点。然后展开蓝色。节点 18 从橙色（没有“链接”）中分离，直到您再次折叠蓝色外壳。知道是什么导致了这种行为吗？

创建了一个新问题来解决这个奇怪的问题，在这里：***.com/questions/28987690/…