javascript - 在 D3 圆包布局算法中控制圆的顺序

标签 javascript svg d3.js circle-pack

我想知道是否可以稍微更改 d3.layout 中的打包算法。也就是说,我想知道是否可以将具有最高值的子节点放在它接触父节点的位置,而不是放在它的中间。现在看起来所有的 child 都在螺旋上升,最小的 child 在 parent 的深处。

希望不要太困惑。我很乐意澄清任何不清楚的地方。

最佳答案

这是可能的。

你只需要在d3.js中替换这段代码:

  function d3_layout_packSort(a, b) {
    return a.value - b.value;
  }

使用此代码:

  function d3_layout_packSort(a, b) {
    return -(a.value - b.value);
  }

(只是符号的变化)

最大的圆圈不会位于父级的正中心,但它们往往靠近中心。我的理解是你不需要在中心精确放置,只是近似,所以我希望这能满足你的想法。

下图并排说明了使用常规和修改后的 d3.js 获得的圆形包示例:

Regular and modified packing

我比较喜欢 retrofit 包装。 :) 所以我想这是个好主意。检查它与您的数据的外观。

您可以在此处访问这些示例:regular , modified .

我修改后的 d3.js 是 here .

如果您还有其他问题,请告诉我。

关于javascript - 在 D3 圆包布局算法中控制圆的顺序,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20736876/

相关文章:

javascript - 更改 Aurelia 中的数组顺序,奇怪的行为

javascript - HTML 页面中页面加载的不同内容

javascript - 如何在 JavaScript 中使用 setAttributeNS() 捕获错误?

javascript - 函数原型(prototype)对象在另一个实例上被更改

dynamic - 如何在另一个 SVG 文件中居中和缩放 SVG 文件

css - SVG - 同时插入和投影

javascript - d3 force 网络中的水平链接标签

javascript - 在文本标签内添加一个 div

javascript - 依次绘制 D3 路径

javascript - AngularJS - 三个依赖选择 - 只有前两个填充