-1
我正在嘗試使用d3構建基於餅圖中數據總值的大小不同的餅圖數組。我如何根據餅圖總數改變餅圖的大小?
有誰知道我怎麼可能從D3例如採取HTML文件:
http://bl.ocks.org/mbostock/3888852
並修改餅圖半徑正比於從餡餅CSV文件中的總數據圖表?
我正在嘗試使用d3構建基於餅圖中數據總值的大小不同的餅圖數組。我如何根據餅圖總數改變餅圖的大小?
有誰知道我怎麼可能從D3例如採取HTML文件:
http://bl.ocks.org/mbostock/3888852
並修改餅圖半徑正比於從餡餅CSV文件中的總數據圖表?
這裏有一個快速的嘗試:
...
data.forEach(function(d) {
d.total = 0;
d.ages = color.domain().map(function(name) {
d.total += +d[name]; // add a total of all population for each state
return {name: name, population: +d[name]};
});
});
// determine the maximum population for all states (ie California)
var maxPopulation = d3.max(data, function(d){
return d.total;
});
// now for each d.age (where the the arcs come from)
// stash an arc function based on a scaled size
data.forEach(function(d) {
var r = radius * (d.total/maxPopulation);
var someArc = d3.svg.arc() // make the radius scale according to our max population
.outerRadius(r)
.innerRadius(r - (r-10));
d.ages.forEach(function(a){
a.arc = someArc; // stash the arc in the d.ages data so we can access later
})
});
...
svg.selectAll(".arc")
.data(function(d) { return pie(d.ages); })
.enter().append("path")
.attr("class", "arc")
.attr("d", function(d){
return d.data.arc(d); // use our stashed arc function to create the path arc
})
.style("fill", function(d) { return color(d.data.name); })
例here。
你可能不得不改變我如何縮放派的大小。我的線性方法很有效,但與CA相比,一些州的人數很少,他們的餅圖可查看。