Javascript 使用D3创建多层饼图

如何使用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);
       }
    });

---

非常感谢。

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

带注释的工作代码

---

希望这有帮助

这不是很接近你想要的吗@Cyril我在搜索时遇到了上面提到的代码，但如果你仔细观察，一个部分并不是我所希望的从圆周到中心的全部。有一件事是不清楚的——内部部分有时长，有时短——这是什么标准。为什么不是所有的部分都有相同的半径？假设饼图中有5个主要部分；这意味着他们每人有20%。现在每个小节有两个级别；深色表示级别1的百分比，浅色表示级别2的百分比。因此，对于每个主要部分，内部的小节都会有所不同。我希望现在已经很清楚了，也许你可以用饼图来对应你的数据？你到底想让它看起来怎么样？你能解释一下你的数据集吗：）很好的解决方案Cyril:）@Cyril，非常感谢你的回答，但我已经尝试过改变数据集，派变得很奇怪。请看一看。只需调整返回内径的刻度即可。请立即尝试@Cyril，再次感谢。当所有次要值都等于0时，如何使颜色完全变暗？就像在这个例子中：@Artiga就像我之前说的，这只是你如何设置音阶的问题。正如您在上面的注释部分中提到的，半径是由我的代码FIDLE中的大调和小调X2=X-X1的差异定义的，这里也是如此返回刻度（（d.data.major-d.data.minor））；现在，如果大调和小调都是相同的，半径将为0。正如在第5组中一样，在这里检查刻度被定义为最小值0，以使半径0变为var scale=d3.scale.linear（）.range（[0，radius-d3.min（数据，函数（d）{return d.major；}]）；