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是相关的，我做了这样的数据集。

for (int newNames = 0; newNames < dtDDLBindName.Rows.Count; newNames++)
        {

            System.Web.UI.HtmlControls.HtmlGenericControl divMapClient = new System.Web.UI.HtmlControls.HtmlGenericControl("div");
            divMapClient.ID = 100 + "divMapClient" + newNames;
            divMapClient.Attributes.Add("class", "row");
            divMapClient.Attributes.Add("runat", "server");


            System.Web.UI.HtmlControls.HtmlGenericControl divNewClients = new System.Web.UI.HtmlControls.HtmlGenericControl("div");
            divNewClients.ID = 100 + "divNewClients" + newNames;
            divNewClients.Attributes.Add("runat", "server");
            divNewClients.Attributes.Add("class", "col-sm-6");

            Label lblNewClientName = new Label();
            lblNewClientName.ID = "lblNewClientName" + newNames;
            lblNewClientName.Attributes.Add("runat", "server");
            lblNewClientName.Text = dtDDLBindName.Rows[newNames]["Investor Name"].ToString();


            divNewClients.Controls.Add(lblNewClientName);

            Label lblNewClientID = new Label();
            lblNewClientID.ID = "lblNewClientID" + newNames;
            lblNewClientID.Attributes.Add("runat", "server");
            lblNewClientID.Style.Add("display", "none");
            lblNewClientID.Text = dtDDLBindName.Rows[newNames]["Investor Id"].ToString();


            divNewClients.Controls.Add(lblNewClientID);

            divMapClient.Controls.Add(divNewClients);

            divmain.Controls.Add(divMapClient);

            System.Web.UI.HtmlControls.HtmlGenericControl br = new System.Web.UI.HtmlControls.HtmlGenericControl("br");
            divmain.Controls.Add(br);

        }

我做了两个弧功能。

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

使用评论工作代码here

希望这有帮助！

使用D3创建多层饼图

1 个答案: