如何增加d3.js不同層次的填充圓的佈局？

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