Как вы увеличиваете отступы на разных уровнях компонованного круга d3.js?
Я делаю пузырьковую диаграмму скважин природного газа, принадлежащих различным энергетическим компаниям в Пенсильвании, используя 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);
});
1 ответ
Приведенный ниже код позволит вам изменить отступы на основе радиуса, высоты или глубины узла:
var pack = d3.pack()
.size([diameter - margin, diameter + margin])
.padding(function(d) {
return d.height > 1 ? d.r / 0.35 : 3
});