Question

我们在asp.net中使用d3js显示甜甜圈饼图。我们使用d3.json传递json数据来显示wheel level1。根据数据显示轮级1。我们正在使用另一个d3.json传递json数据来显示wheel level2。但是轮盘2的起始楔形不会显示在饼图中。

我观察到如果我独立绘制Level1和Level2的DoNut，它会分别显示Level 1，Level2的所有楔形。当我改变了Level1和Level2的内部，外半径并且在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），这解决了我的问题

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

1 个答案: