**** 最新小提琴 ---https://jsfiddle.net/tk5xog0g/8/ https://jsfiddle.net/tk5xog0g/8/
-- 第二次摆弄自定义图表 -- 随机将气泡放置在靠近区域的区域，但不能考虑重叠或从中心图表区域脱落的情况。http://jsfiddle.net/NYEaX/1484/ http://jsfiddle.net/NYEaX/1484/
我想结合甜甜圈饼图和气泡图来产生像这样的精确结果
我最接近的地方 - 就在这里。
https://jsfiddle.net/tk5xog0g/10/ https://jsfiddle.net/tk5xog0g/10/
/* ------- ANIMATE BUBBLES -------*/
// generate data with calculated layout values
var data = bubbledata(data);
var nodes = bubble.nodes(data)
.filter(function(d) {
return !d.children;
}); // filter out the outer bubble
var bubbles = bubs.selectAll('circle')
.data(nodes);
bubbles.enter()
.insert("circle")
.attr('transform', function(d) {
return 'translate(' + d.x + ',' + d.y + ')';
})
.attr('r', function(d) {
return d.r;
})
.style("fill", function(d) {
return color(d.group);
});
bubbles = bubbles.transition()
.transition()
.duration(250)
.attr('transform', function(d) {
return 'translate(' + d.x + ',' + d.y + ')';
})
.attr('r', function(d) {
//console.log("dr", d.r)
return d.r;
})
.ease('sine');
/* ------- ANIMATE BUBBLES -------*/
我还考虑过尝试对气泡图进行聚类，以至少始终将颜色分组在一起 - 但这仍然与所需的图表不匹配 - 需要颜色气泡靠近匹配的饼图部分。
-- this is a clustered variant but the orange bubbles may sit sandwiched in the middle and once I try and merge it with the pie - won't correspond. I have considered trying to add a charge/gravity to try and get the bubbles to repel.
https://jsfiddle.net/tk5xog0g/20/ https://jsfiddle.net/tk5xog0g/20/
https://bl.ocks.org/mbostock/7881887 https://bl.ocks.org/mbostock/7881887
var width = 960,
height = 500,
radius = Math.min(width, height) / 2;
var color = d3.scale.ordinal()
.range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);
var arc = d3.svg.arc()
.outerRadius(radius - 60)
.innerRadius(radius - 70);
var pie = d3.layout.pie()
.sort(null)
.value(function(d) { return d.value; });
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
var data = [
{
"group": "<5",
"value": 1000,
"children": [
{
"group": "<5",
"label": "Mel",
"value": 1000,
"totalGroupValue": 1000
}
]
},
{
"group": "5-13",
"value": 1000,
"children": [
{
"group": "5-13",
"label": "Erica",
"value": 1000,
"totalGroupValue": 1000
}
]
},
{
"group": "14-17",
"value": 2000,
"children": [
{
"group": "14-17",
"label": "Jessica",
"value": 1500,
"totalGroupValue": 2000
},
{
"group": "14-17",
"label": "Jill",
"value": 500,
"totalGroupValue": 2000
}
]
},
{
"group": "18-24",
"value": 1300,
"children": [
{
"group": "18-24",
"label": "Jerry",
"value": 500,
"totalGroupValue": 1300
},
{
"group": "18-24",
"label": "Ben",
"value": 500,
"totalGroupValue": 1300
},
{
"group": "18-24",
"label": "Billy",
"value": 300,
"totalGroupValue": 1300
}
]
},
{
"group": "25-44",
"value": 1000,
"children": [
{
"group": "25-44",
"label": "Kelly",
"value": 1000,
"totalGroupValue": 1000
}
]
}
];
var g = svg.selectAll(".arc")
.data(pie(data))
.enter().append("g")
.attr("class", "arc");
g.append("path")
.attr("d", arc)
.style("fill", function(d) {
return color(d.data.group);
});
arc
.outerRadius(radius - 10)
.innerRadius(0);
//create zone regions
var zones = [];
g.append("circle")
.attr("transform", function(d) {
zones[d.data.group] = arc.centroid(d);
//zones.push(obj);
return "translate(" + arc.centroid(d) + ")";
})
.attr("r", "1px")
.style("fill", function(d) {
return "black"//color(d.data.group);
});
//create zone regions
//custom bubble chart
function makeBubbles(transform, group, radius){
g.append("circle")
.attr("transform", function(d) {
return "translate("+transform+")";
})
.attr("r", radius)
.style("stroke", function(d) {
return "black";//color(group);
})
.style("fill", function(d) {
return color(group);
});
}
//loop through data and for EACH children array paint dots.
$.each(data, function( index, value ) {
$.each(value.children, function( i, v ) {
var randomX = Math.floor(Math.random() * 101) - 50;
var randomY = Math.floor(Math.random() * 101) - 50;
var zoneregion = zones[v.group];
var transform = (zoneregion[0] - randomX)+","+(zoneregion[1]+randomY);
var group = v.group;
var radius = ((v.value/v.totalGroupValue)*100) *0.5;
makeBubbles(transform, group, radius);
});
});
//custom bubble chart
function type(d) {
d.value = +d.value;
return d;
}.arc text {
font: 10px sans-serif;
text-anchor: middle;
}
.arc path {
stroke: #fff;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<body>希望这可以帮助。
var width = 960,
height = 500,
radius = Math.min(width, height) / 2;
var color = d3.scale.ordinal()
.range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);
var arc = d3.svg.arc()
.outerRadius(radius - 60)
.innerRadius(radius - 70);
var pie = d3.layout.pie()
.sort(null)
.value(function(d) { return d.population; });
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
var data = [
{"age":"<5", "population":"2704659"},
{"age":"5-13", "population":"4499890"},
{"age":"14-17", "population":"2159981"},
{"age":"18-24", "population":"3853788"},
{"age":"25-44", "population":"14106543"},
{"age":"45-64", "population":"8819342"},
{"age":"≥65", "population":"612463"}
];
var g = svg.selectAll(".arc")
.data(pie(data))
.enter().append("g")
.attr("class", "arc");
g.append("path")
.attr("d", arc)
.style("fill", function(d) { return color(d.data.age); });
arc
.outerRadius(radius - 10)
.innerRadius(0);
g.append("circle")
.attr("transform", function(d) { return "translate(" + arc.centroid(d) + ")"; })
.attr("r", "15px")
.style("fill", function(d) { return color(d.data.age); });
function type(d) {
d.population = +d.population;
return d;
}.arc text {
font: 10px sans-serif;
text-anchor: middle;
}
.arc path {
stroke: #fff;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>