Question

我正在创建自定义群集，其中每个节点都具有状态＆＃34; D＆＃34;具有不同大小的圆圈表示它。有些节点没有任何圆圈。

我的问题是，有些圆圈重叠，而旁边的简单节点之间有太大的空间。我想根据圆的大小设置节点和它们的分支之间的空间。

var root = {    
 "name": "cs4001",
 "children": [
  {
   "name": "cs3212",
   "children": [
    {
     "name": "cs2121",
     "status": "D"
    }]
  },
     {
         "name": "cp2121",
         "status": "D"
     },
     {
         "name": "cp21214"
     },
     {
         "name": "cp21215"
     }

 ]
};

(function(root) {
  var nodes = cluster.nodes(root),
  links = cluster.links(nodes);

  var link = svg.selectAll(".link")
   .data(links)
   .enter().append("path")
    .attr("class", "link")
    .attr("d", diagonal);

  var node = svg.selectAll(".node")
   .data(nodes)
   .enter().append("g")
     .attr("class", "node")
     .attr("transform", function(d) { return "translate(" + d.y + "," + d.x +      ")"; })

  node.append("circle")
    .attr("r", function(d) {return d.status=="D" ? 70: null} );

  node.append("text")
    .attr("dx", function(d) { return d.children ? -8 : 8; })
    .attr("dy", 3)
    .style("text-anchor", function(d) { return d.children ? "end" : "start"; })
    .text(function(d) { return d.name; });
})(root);

我更新了fiddle我在谷歌首先发现了我的意思。

Answer 1

您应该在群集布局中进行两项更改。首先，您必须使用.size而不是.nodeSize来定义.separation函数，以找到两个节点之间的所需距离。

两个节点之间的距离是通过将.nodeSize中给出的垂直参数与两个节点的给定分离函数的返回值相乘来计算的。

我更新了fiddle以显示这些变化。

d3集群布局中节点之间的自定义空间

1 个答案: