使用相对的 SVG 宽度和高度在中心节点周围均匀分布节点

Question

我正在使用 D3 库并使用以下设置节点坐标的代码片段：

node.enter().append("circle")
  .attr("class", "node")
  .attr("cx", function(d) { 
    return d.x; 
  })
  .attr("cy", function(d) { 
    return d.y; 
  })
  .attr("r", function(d) { return Math.sqrt(d.size) / 10; })
  .style("fill", color)
  .on("click", click)
  .on('mouseover', tip.show)
  .on('mouseout', tip.hide)
  .call(force.drag);

查看Plunker Example

我想在父节点周围均匀分布子节点，以便数据分布最大化 SVG 的 space - 尽管尝试调整 "cy" 和 "cx" 属性并通过 "r" 属性.

增加单个节点的大小

Answer 1

为了解决这个问题，我更新了 Force Layout 上的两个默认方法属性，它们是 .linkDistance() and .linkCharge()

var force = d3.layout.force()
.linkDistance(80)
.charge(-500);

之前

之后

感谢@Mark 对 Force Layout Documentation.

的引用

使用相对的 SVG 宽度和高度在中心节点周围均匀分布节点

Distribute nodes evenly around central node using a relative SVG width and height

javascript

svg

d3.js

之前

之后