使用 D3 创建多层饼图

Question

如何使用 d3.js 创建多层饼图，如下所示

每个部分都没有内部子部分，当它有一个子部分时，它的颜色比外部子部分更深，如上图所示。

我尝试搜索多层饼图，但我只能做这个。

这里是对应的javascript代码

var dataset = {
  final: [7000],
  process: [1000, 1000, 1000, 7000],
  initial: [10000],
};

var width = 660,
    height = 500,
    cwidth = 75;

var color = d3.scale.category20();

var pie = d3.layout.pie()
    .sort(null);

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
    .append("g")
    .attr("class","wrapper")
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")")

var gs = svg.selectAll("g.wrapper").data(d3.values(dataset)).enter()
        .append("g")
        .attr("id",function(d,i){
            return Object.keys(dataset)[i];
        });

var gsLabels = svg.selectAll("g.wrapper").data(d3.values(dataset)).enter()
        .append("g")
        .attr("id",function(d,i){
            return "label_" + Object.keys(dataset)[i];
        });

var count = 0;
var path = gs.selectAll("path")
    .data(function(d) { return pie(d); })
  .enter().append("path")
    .attr("fill", function(d, i) { return color(i); })
    .attr("d", function(d, i, j) { 
        d._tmp = d.endAngle;
        d.endAngle = d.startAngle;
        if(Object.keys(dataset)[j] === "final"){
            d.arc = d3.svg.arc().innerRadius(cwidth*j).outerRadius(cwidth*(j+1)); 
        }
        else{
            d.arc = d3.svg.arc().innerRadius(10+cwidth*j).outerRadius(cwidth*(j+1)); 
        }
        return d.arc(d);
        })
    .transition().delay(function(d, i, j) {
            return i * 500; 
    }).duration(500)
    .attrTween('d', function(d,x,y) {
       var i = d3.interpolate(d.startAngle, d._tmp);
       return function(t) {
           d.endAngle = i(t);
         return d.arc(d);
       }
    });

非常感谢。

Answer 1

我已将您的数据集更改为单个 JSON。

为了确保上面提到的数组 x 和 x1 是相关的，我做了这样的数据集。

data = [{
    major: 100,//this is the X array first element
    minor: 70,//this is the X1 array first element
    grp: 1//here grp is for coloring the segment
}, {
    major: 100,
    minor: 30,
    grp: 2
}, {
    major: 100,
    minor: 50,
    grp: 3
}, {
    major: 140,
    minor: 70,
    grp: 4
}, {
    major: 80,
    minor: 10,
    grp: 5
}];

我做了两个arc函数

var arcMajor = d3.svg.arc()
    .outerRadius(function (d) {
    return radius - 10;
})
    .innerRadius(0);

//this for making the minor arc with variable radius as per scale 
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));
})

这是创建路径的代码。

//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
});

工作代码here 带注释

希望对您有所帮助！

使用 D3 创建多层饼图

Creating a multilayer pie chart with D3

javascript

d3.js

pie-chart