使用D3创建多层饼图

Question

使用D3创建多层饼图

javascriptd3.jspie-chart

5

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

非常感谢。

- Artiga

这不是你想要的吗？https://pankajkumar005.wordpress.com/2015/08/14/multilevel-pie-chart-using-d3/ - Cyril Cherian

@ Cyril，我在搜索时遇到了提到的代码，但是如果你仔细看，有一个部分没有从圆周到饼图中心，这正是我想要的。 - Artiga

一个问题不太清楚，即内部子段有时很长，有时很短，这是什么标准？为什么不所有的子段都有相同的半径？ - Cyril Cherian

也许你可以让你那里的饼图对应你的数据？你想让它看起来怎样？能否解释一下你的数据集 :) - thatOneGuy

好的，但是X1和X之间将会有一对一的对应关系，也就是说X和X1将拥有相同数量的元素，对吗？ - Cyril Cherian

显示剩余5条评论

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Cyril Cherian · Accepted Answer

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

这里有相关的it技术代码示例，并且还有注释。

希望这能帮到你！