javascript - 可以在 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};
}