javascript - 包布局的填充和边距

Question

介绍

我一直在 StackOverflow 上搜索关于使用圆形包装布局的填充/边距应用程序，但没有找到有用的问题和答案。

我有什么

我有一个包布局，圆圈内有圆圈，如下所示:

输入的圆圈由以下人员呈现:

var selection = child.datum(data).selectAll(".node")
    .data(pack.nodes, function(d) {
      return d.name;
    });

var newG = enter
    .append("g")
    .classed("node", true)
    .attr("transform", function(d) {
      return translate(d.x, d.y);
    });

  newG
    .append("circle") // Outer circle
    .attr("r", function(d) { return 0; })
    .style("fill", "green")
    .append("circle") // Inner circle
    .attr("r", function(d) {
      return d.r - (d.r / 10); // Border is 10% of the circle radius
    });

期望

增加第一个圆的半径是行不通的。我真的没有尝试那么多东西，因为我不知道我应该为此尝试什么。所有的 circle 元素都基于 g，但是增加 g 元素的翻译会导致对其他元素位置的误解.我在那里增加的所有内容只会增加圆及其子元素的规模，但必要的是在它们之间进行填充。我有一个基本的 working demo here .

问题

是否有一种简单的方法可以在包布局或内置功能上应用填充/边距？。

已编辑

使用内置的 pack.padding() 将使圆圈彼此远离。这部分解决了问题，但是圆圈还没有到达 parent 。这是一个内部空间:

提前致谢。

Answer 1

您可以使用 pack.padding() 获得一些方法.这不会改变 child 与 parent 的距离——目前 D3 不支持这一点。

我已经实现了一个 margin 参数，并提交了一个 pull request ，所以希望它很快就会可用。