我的数据集如下:
year,c-edges,cp-edges,p-edges,c-dens,cp-dens,p-dens
2010,300,900,80,12,5.73,0.5
2011,536,946,72,14.89,4.97,0.47
2012,200,910,75,13,5,0.6
2013,400,990,88,11,4,0.5
年份将描绘图像中的馅饼切片。接下来的3列是数字,将转换为3个区域(多层)的长度。 接下来的3列是将转换为3个区域颜色的密度。
尽管看起来很困难,但我开始研究它,并感谢@Cyril Cherian,我可以使用它来获得多层饼图。
对于创建部门,我能够找到它
Can you create a pie chart with varying slice sizes in d3?
但是我无法理解如何将两者结合以获得理想的结果。
var width = 960,
height = 500,
radius = Math.min(width, height) / 2;
var scale = d3.scale.linear().range([20, radius - 40]);
var color = d3.scale.ordinal()
.range(["cyan", "green", "blue", "brown", "violet", "orange", "purple"]);
var arcMajor = d3.svg.arc()
.outerRadius(function (d) {
return radius - 10;
})
.innerRadius(0);
//this for making the minor arc
var arcMinor = d3.svg.arc()
.outerRadius(function (d) {
// scale for calculating the radius range([20, radius - 40])
return scale((d.data.major - d.data.minor));
})
.innerRadius(0);
var pie = d3.layout.pie()
.sort(null)
.value(function (d) {
return d.major;
});
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
data = [{
major: 100,
minor: 70,
grp: 1
}, {
major: 100,
minor: 30,
grp: 2
}, {
major: 100,
minor: 50,
grp: 3
}, {
major: 140,
minor: 70,
grp: 4
}, {
major: 80,
minor: 10,
grp: 5
}];
//setting the scale domain
scale.domain([d3.min(data, function (d) {
return d.minor;
}), d3.max(data, function (d) {
return d.minor;
})]);
var g = svg.selectAll(".arc")
.data(pie(data))
.enter().append("g")
.attr("class", "arc");
//this makes the major arc
g.append("path")
.attr("d", function (d) {
return arcMajor(d);
})
.style("fill", function (d) {
return d3.rgb(color(d.data.grp));
});
//this makes the minor arcs
g.append("path")
.attr("d", function (d) {
return arcMinor(d);
})
.style("fill", function (d) {
return d3.rgb(color(d.data.grp)).darker(2);//for making the inner path darker
});
.arc text {
font: 10px sans-serif;
text-anchor: middle;
}
.arc path {
stroke: #fff;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.9/d3.js"></script>
http://jsfiddle.net/cyril123/6e8aue0h/2/
任何人都可以帮助我实现相同目标。
预先感谢