C3.jsの同心円弧

Question

C3.jsのドーナツチャートに同心円弧を実装しようとしています。これまでのところ、私はドーナツチャートを作成しましたが、今ではバスケットボール選手が作成した3つのポインタの％を表す別の円弧をドーナツの中に追加したいと考えています。

C3.jsでこれの例が見つかりません。 Donut Chart

そして、私のサイズは15ピクセルと作られた3つのポインタの割合をカバーしている別の円弧を追加する：ここで

は、チャートがどのように見えるかです。ここに私がこれまで持っていたコードがあります。

var chart = c3.generate({ 
         data: { 
          columns: [ 
           ['Shots', 50], 
           ['Threes', 50] 
          ], 
          type: 'donut', 
          colors: { 
           Shots: '#ff0000', 
           Threes: '#E8E8EE' 
          }        
         }, 
         donut: { 
           expand: false, 
           label: { 
            show: false, 
            format: function(value, ratio) { 
             console.log("value: " + value) 
             return value; 
            } 
           }, 
           width: 15 
         }, 
         legend: { 
          hide: true 
         }, 
         tooltip: { 
          show: false 
         } 
        }); 

        d3.select(".c3-chart-arcs-title") 
        .append("tspan") 
        .attr("dy", -20) 
        .attr("x", 0) 
        .text("Year: 5"); 

        d3.select(".c3-chart-arcs-title") 
        .append("tspan") 
        .attr("dy", 16) 
        .attr("x", 0) 
        .text("50% Shots Made"); 

        d3.select(".c3-chart-arcs-title") 
        .append("tspan") 
        .attr("dy", 16) 
        .attr("x", 0) 
        .text("25% 3ptrs Made"); 

Answer 1

私はC3を使用することを断念しました。なぜなら、動作させるためのマニュアルが見つからなかったからです。 D3.jsのコードでは、2つの同心円の円弧を作成しています。この方法ははるかに簡単でした。

<div id="chart"></div> 

<style> 
         .arc { 
          fill: #00b33c; 
         } 
         .arc2 { 
          fill: #d3d3d3; 
         } 

         .arc3 { 
          fill: #196719; 
         }              
        </style> 

<script type="text/javascript"> 

var shotsMade = .63; 
var shotsMissed = 1 - shotsMade; 
var threePtrs = .50; 

        var svg = d3.select("#chart") 
         .append("svg") 
         .attr("width", 300) 
         .attr("height", 220) 
         .append("g") 
         .attr("transform", "translate(100,100)"); 

        var arc = d3.svg.arc() 
         .innerRadius(90) 
         .outerRadius(100) 
         .startAngle(0) 
         .endAngle(shotsMade * 2 * Math.PI); 

        svg.append("path") 
         .attr("class", "arc") 
         .attr("d", arc); 

        var arc2 = d3.svg.arc() 
         .innerRadius(90) 
         .outerRadius(100) 
         .startAngle(0) 
         .endAngle(-1 * shotsMissed * 2 * Math.PI); 

        svg.append("path") 
         .attr("class", "arc2") 
         .attr("d", arc2); 

        var arc3 = d3.svg.arc() 
         .innerRadius(80) 
         .outerRadius(90) 
         .startAngle(0) 
         .endAngle(threePtrs * 2 * Math.PI); 

        svg.append("path") 
         .attr("class", "arc3") 
         .attr("d", arc3); 

        var textConfirmed = svg.append("text") 
        .attr("dy", "0") 
        .style("text-anchor", "middle") 
        .style('fill', '#196719') 
        .attr("class", "shots") 
        .text("50% Three Ptrs") 
        .attr("y", 12); 

        var textAdherence = svg.append("text") 
        .attr("dy", "0") 
        .style("text-anchor", "middle") 
        .style('fill', '#00b33c') 
        .attr("class", "threePtrs") 
        .text("60% Shots Made") 
        .attr("y", 28); 


</script>