Wolfram的SectorChart和多层饼图的组合

时间:2019-07-15 08:25:21

标签: javascript d3.js pie-chart

我正在尝试创建一个密度饼图,该饼图也会多层化。 (例如enter image description here

我的数据集如下:

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/

任何人都可以帮助我实现相同目标。

预先感谢

0 个答案:

没有答案