Javascript 如何在d3.js';什么是填充圆布局?
我正在用d3.js制作宾夕法尼亚州不同能源公司拥有的天然气井的气泡图 我构建了一个嵌套对象,它首先按公司排序,然后按井排序。片段:Javascript 如何在d3.js';什么是填充圆布局?,javascript,css,d3.js,circle-pack,Javascript,Css,D3.js,Circle Pack,我正在用d3.js制作宾夕法尼亚州不同能源公司拥有的天然气井的气泡图 我构建了一个嵌套对象,它首先按公司排序,然后按井排序。片段: { "name": "Companies", "children":[ { "name": "Shell", "children": [ { "name": "100", "lat": 40.543401,
{
"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);
});
下面的代码将允许您根据节点的半径、高度或深度修改填充:
var pack = d3.pack()
.size([diameter - margin, diameter + margin])
.padding(function(d) {
return d.height > 1 ? d.r / 0.35 : 3
});
下面的代码将允许您根据节点的半径、高度或深度修改填充:
var pack = d3.pack()
.size([diameter - margin, diameter + margin])
.padding(function(d) {
return d.height > 1 ? d.r / 0.35 : 3
});
你能给我们提琴吗?当前的包装布局不允许可变填充。你能给我们提琴吗?当前的包装布局不允许可变填充。