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

你如何在d3.js的打包圈布局的不同级别增加填充？

1 个答案: