當繪制2個甜甜圈時，D3JS圖形甜甜圈沒有顯示一些楔形

Question

我們正在asp.net中使用d3js顯示甜甜圈餅圖。 我們正在使用d3.json傳遞json數據以顯示轉輪level1。 根據數據顯示車輪等級1。 我們使用另一個d3.json傳遞json數據以顯示轉輪level2。 但是，在餅圖中未顯示車輪level2的起始楔形。

我觀察到，如果我分別繪制Level1和Level2的DoNut，它將分別顯示Level 1和Level2的所有楔形。 當我更改Level1和Level2的inner半徑，out半徑並在Level1甜甜圈內部顯示了Level2甜甜圈的外部時，出現了一些楔子未顯示的相同問題。 角度數據存儲在MySQL數據庫中，使用相同的圖形繪制。 我檢查了級別2的所有楔形的角度總和為360。

這是圖

用於繪制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; });

});

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），這解決了我的問題