javascript - 使用 D3 创建多层饼图

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



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

我尝试搜索多层饼图，但我所能做的就是这个。

http://jsfiddle.net/ZpQ3x/

这是相应的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);
       }
    });

非常感谢你。

最佳答案

我已将您的数据集更改为单个 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
}];

我做了两个弧函数。

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

希望这可以帮助!