可以在 d3.js 中使用具有固定圆圈大小的圆圈包布局吗？

Question

这个圆形包布局示例 (http://bl.ocks.org/4063269) 非常适合我正在进行的一个项目，但是它会相对于彼此调整所有圆形的大小：

有没有一种简单的方法可以为每个圆指定固定半径？

我已经搜索了源代码、示例、google 和 stackoverflow，但似乎找不到任何有用的东西。

圆圈的确切大小对我来说很重要。

Answer 1

这是可能的，而且做起来很简单。第一个答案是准确的，但我相信我的更简单，更明确，所以我也附上它。

请看这个例子：jsfiddle

当你按下“Constant”按钮时，你会看到如下内容：

关键代码行是这样的：

    pack.value(function(d) { return 100; })

这将使圆半径与数据无关。当然，100 可以是任何常数。您可以在循环包初始化（很可能是您的情况）或重新初始化（如我的示例中）中应用此行。

希望这会有所帮助。

Answer 2

如果您按照您给出的示例中的代码，<circle> 元素的大小将在此处确定：

node.append("circle")
  .attr("r", function(d) { return d.r; })
// ...

要将圆圈的大小固定为50，您可以这样做：

node.append("circle")
  .attr("r", function(d) { return 50; })
// ...

---

更新

但是，这会破坏评论中指出的布局。为了解决这个问题，可以为每个节点提供相同的value：

// Returns a flattened hierarchy containing all leaf nodes under the root.
function classes(root) {
  var classes = [];

  function recurse(name, node) {
    if (node.children) node.children.forEach(function(child) { recurse(node.name, child); });
    else classes.push({packageName: name, className: node.name, value: node.size});
  }

  recurse(null, root);
  return {children: classes};
}

到：

// Returns a flattened hierarchy containing all leaf nodes under the root.
function classes(root) {
  var classes = [];

  function recurse(name, node) {
    if (node.children) node.children.forEach(function(child) { recurse(node.name, child); });
    else classes.push({packageName: name, className: node.name, value: 1});
  }

  recurse(null, root);
  return {children: classes};
}