包布局上的填充和边距

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() 将使圆圈彼此远离。这部分解决了问题，但圈子尚未到达父级。这是一个内部空间：

提前致谢。

Answer 1

您可以通过pack.padding() 获得一些帮助。这不会改变孩子与父母的距离——目前 D3 不支持这一点。

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