javascript - 如何在 d3.js 的packed circle layout 的不同级别增加padding？

Question

我正在使用 d3.js 制作宾夕法尼亚州不同能源公司拥有的天然气井的气泡图。

我构建了一个嵌套对象，它首先按公司排序，然后按井排序。一个片段：

{
    "name": "Companies",
    "children":[
    {
        "name": "Shell",
        "children": [
            {
                "name": "100",
                "lat": 40.543401,
                "lng": -79.162257,
                "company": "Shell",
                "production": "20000"
            },
            {
                "name": "2",
                "lat": 40.608186,
                "lng": -79.369354,
                "company": "Shell",
                "production": "40000"
            },
            {
                "name": "3",
                "lat": 40.558923,
                "lng": -79.630966,
                "company": "Shell",
                "production": "10000"
            }
        ]
    },
    {
        "name": "Range",
        "children": [
            {
                "name": "4",
                "lat": 40.431514,
                "lng": -79.466171,
                "company": "Range",
                "production": "25000"
            },
            {
                "name": "5",
                "lat": 40.439876,
                "lng": -80.015488,
                "company": "Range",
                "production": "26000"
            }
        ]
    }
]}

使用d3.layout.pack，我将圆圈之间的填充设置为 5。

var pack = d3.layout.pack()
  .size([w,h])
  .padding(5)
  .value(function(d) {
      return (d.production)
  });

但是，虽然我对内圈聚集在一起很好，但我如何将上层圈分开？我试过分配.padding一个功能无济于事。

var pack = d3.layout.pack()
  .size([w,h])
  .padding( function(d) {
      if (d.depth == 1)
          return 50;
      else
          return 5;
  })
  .value( function(d) {
      return (d.production);
  });

Answer 1

下面的代码将允许您根据节点的半径、高度或深度修改填充：

var pack = d3.pack()
  .size([diameter - margin, diameter + margin])
  .padding(function(d) {
      return d.height > 1 ? d.r / 0.35 : 3
  });