当绘制2个甜甜圈时，D3JS图形甜甜圈没有显示一些楔形

Question

We are displaying donut pie chart using d3js in asp.net. We are using d3.json for passing json data to display wheel level1. Wheel level1 is display as per the data. We are using another d3.json for passing json data to display wheel level2. But starting wedges of wheel level2 are not display in pie chart.

I observed that if I plot the DoNut of Level1 and Level2 independently it shows all wedges of both Level 1, Level2 respectively. When I changed the inner , out radius of Level1 and Level2 and displayed Level2 donut outside wiht Level1 donut inside, getting same problem of some wedges not displayed. The data of angles is stored in MySQL database, using the same the graph is plotted. I checked the sum of angles of all wedges for the Level 2 is 360.

here is the graph

Sample code that is being used to plot Level1 DoNut

 d3.json("http://localhost:50025/SportsWheelServices.asmx/WheelLevel1", function (error, data) {

        data.forEach(function (d) {
            d.SectionId = d.SectionId;
            d.SectionLevel1 = d.SectionLevel1;
            d.GroupName = d.GroupName;
            d.SectionUpColor = d.SectionUpColor;
            d.Rotation = d.Rotation;
      });

        var label = d3.arc()
          .outerRadius(radius - 20)
          .innerRadius(400);

        var pie = d3.pie()
                       .sort(null)
                       .value(function (d) { return d.SectionLevel1; });

        var arc = d3.arc()         
           .outerRadius(radius - 20)
           .innerRadius(400);        

        var arcs = g.selectAll(".arc")
          .data(pie(data))
          .enter().append("g")
            .attr("class", "arc");

        arcs.append("path")
            .attr("d", arc)       
        .attr("fill", function (d, i) { return colors(data[i].SectionUpColor); });

        arcs.append("text")
         .attr("transform", function (d) {          
             var rotation = d.endAngle < Math.PI ? (d.startAngle / 2 + d.endAngle / 2) * 180 / Math.PI : (d.startAngle / 2 + d.endAngle / 2 + Math.PI) * 180 / Math.PI;
             return "translate(" + label.centroid(d) + ") rotate("+ d.data.Rotation+") rotate(" + rotation + ")";
         })         
            .attr("dy", "0.35em")
            .text(function (d) { return d.data.GroupName; });

});

Code for Level2 DoNut

d3.json("http://localhost:50025/SportsWheelServices.asmx/WheelLevel2", function (error, data) {

        data.forEach(function(d)
        {
            d.SectionId = d.SectionId;
            d.SectionLevel2 = d.SectionLevel2;          
        });


        var label = d3.arc()
        .outerRadius(radius - 20)
        .innerRadius(300);

        var pie = d3.pie()
                       .sort(null)            
                       .value(function (d) { return d.SectionLevel2; });

        var arc = d3.arc()
           .outerRadius(radius - 20)
           .innerRadius(300);

        var arcs = g.selectAll(".arc")
          .data(pie(data))
          .enter().append("g")
          .attr("class", "arc");

        arcs.append("path")            
           .attr("d", arc)
             .attr("fill", function (d, i) { return colors(i); });        
    });

Answer 1

代替了var arcs = g.selectAll（“。arc”），我添加了以下代码var arcs = g.selectAll（“。arc” + index），这解决了我的问题