D3 Konzentrisch/geschachteltes Donut-Diagramm

Question

Ich habe ein Donut-Diagramm mit D3 erstellt, das zwei Datensätze verwendet und jeweils unterschiedlich große Ringe anzeigt. Ich möchte dem Datensatz Beschriftungen hinzufügen (für eine Legende), aber die selectAll("path") erwartet, dass jeder Datensatz ein einfaches Array von Werten ist, daher konnte ich die Beschriftungen nicht hinzufügen.

Unten ist der Code, den ich so weit und eine Geige haben:

Fiddle

var dataset = { 
     apples: [13245, 28479, 11111, 11000, 3876], 
     oranges: [53245, 28479, 19697, 24037, 19654], 
    }; 

    var width = d3.select('#duration').node().offsetWidth, 
     height = 300, 
     cwidth = 33; 

    var colorO = ['#1352A4', '#2478E5', '#5D9CEC', '#A4C7F4', '#DBE8FB']; 
    var colorA = ['#58A53B', '#83C969', '#A8D996', '#CDE9C3', '#E6F4E1']; 

    var pie = d3.layout.pie() 
     .sort(null); 

    var arc = d3.svg.arc(); 

    var svg = d3.select("#duration svg") 
     .append("g") 
     .attr("transform", "translate(" + width/2 + "," + height/2 + ")"); 

    var gs = svg.selectAll("g").data(d3.values(dataset)).enter().append("g"); 
    var path = gs.selectAll("path") 
     .data(function(d, i) { return pie(d); }) 
     .enter().append("path") 
     .attr("fill", function(d, i, j) { 
      if (j == 0) { 

       return colorO[i]; 

      } else { 

       return colorA[i]; 

      } 

     }) 
     .attr("d", function(d, i, j) { 
      if (j == 0) { 

       return arc.innerRadius(75 + cwidth * j - 17).outerRadius(cwidth * (j + 2.9))(d); 

      } else { 

       return arc.innerRadius(75 + cwidth * j - 5).outerRadius(cwidth * (j + 2.5))(d); 

      } 


     }); 

Answer 1

erwartet jeden Datensatz eine einfache Anordnung von Werten

Dies ist nicht zu sein wahr. Sie können und sollten ein Array von Objekten verwenden. Verwenden Sie dann den Wert accessor, um eine Eigenschaft Ihres Objekts auf die pie-Funktion auszurichten. Hier ist, wie ich würde wieder Faktor Code:

 var dataset = { 
 
      apples: [{ 
 
      value: 13245, 
 
      color: '#1352A4', 
 
      label: 'one' 
 
      }, { 
 
      value: 28479, 
 
      color: '#5D9CEC', 
 
      label: 'two' 
 
      }, { 
 
      value: 11111, 
 
      color: '#1352A4', 
 
      label: 'three' 
 
      }, { 
 
      value: 11000, 
 
      color: '#A4C7F4', 
 
      label: 'four' 
 
      }, { 
 
      value: 3876, 
 
      color: '#DBE8FB', 
 
      label: 'five' 
 
      }], 
 
      oranges: [{ 
 
      value: 53245, 
 
      color: '#58A53B', 
 
      label: 'one' 
 
      }, { 
 
      value: 28479, 
 
      color: '#83C969', 
 
      label: 'two' 
 
      }, { 
 
      value: 19697, 
 
      color: '#A8D996', 
 
      label: 'three' 
 
      }, { 
 
      value: 24037, 
 
      color: '#CDE9C3', 
 
      label: 'four' 
 
      }, { 
 
      value: 19654, 
 
      color: '#E6F4E1', 
 
      label: 'five' 
 
      }] 
 
     }; 
 

 
     var width = d3.select('#duration').node().offsetWidth, 
 
      height = 300, 
 
      cwidth = 33; 
 

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

 
     var innerArc = d3.svg.arc() 
 
      .innerRadius(58) 
 
      .outerRadius(cwidth * 2.9); 
 

 
     var outerArc = d3.svg.arc() 
 
      .innerRadius(70 + cwidth) 
 
      .outerRadius(cwidth * 3.5); 
 

 
     var svg = d3.select("#duration svg") 
 
      .append("g") 
 
      .attr("transform", "translate(" + width/2 + "," + height/2 + ")"); 
 

 
     var gs = svg.selectAll("g").data(d3.values(dataset)).enter().append("g"); 
 
     var en = gs.selectAll("path") 
 
      .data(function(d, i) { 
 
      return pie(d); 
 
      }) 
 
      .enter(); 
 

 
     en.append("path") 
 
      .attr("fill", function(d) { 
 
      return d.data.color; 
 
      }) 
 
      .attr("d", function(d, i, j) { 
 
      return j === 0 ? innerArc(d) : outerArc(d); 
 
      }); 
 

 
     en.append("text") 
 
      .text(function(d) { 
 
      return d.data.label; 
 
      }) 
 
      .attr("transform", function(d, i, j) { 
 
      return j === 0 ? "translate(" + innerArc.centroid(d) + ")" : "translate(" + outerArc.centroid(d) + ")"; 
 
      });

<script src="https://d3js.org/d3.v3.min.js"></script> 
 
<div id="duration"> 
 
    <svg style="height:300px;width:100%"></svg> 
 
</div>