可以在固定圆圈尺寸的d3.js中使用圆形包装布局吗？

Question

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

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

我已经搜索了源代码,示例,谷歌和stackoverflow,似乎找不到任何有用的东西.

圆圈的确切尺寸对我来说很重要.

Answer 1

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

请看一下这个例子:jsfiddle

当您按"常量"按钮时,您将看到如下内容:

关键代码行是这样的:

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

这将使圆半径成为数据的恒定关系.100当然可以是任何常数.您可以在circle pack初始化中应用此行(很可能这将是您的情况),或重新初始化(如我的示例中所示).

希望这可以帮助.

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};
}