c3jsを使用して円グラフにカスタムラベルを表示するにはどうすればいいですか？

Question

C3.jsを使用して画像に示すように円グラフにカスタムラベルを表示したいとします。

私はformat: {...}機能付き円グラフのラベルを変更しようとしました。しかし、それは動作しません。ここで

は、私が試した私が考える

var charThree = c3.generate({ 
    bindto: "#chartThree", 
    size: { 
     width: 500, 
     height: 300 
    }, 
    data: { 
     colors: { 
      A: 'yellow', 
      B: 'red', 
      C: 'green', 
      D: 'orange', 
      E: 'blue' 
     }, 
     columns: [ 
       ['A',20], 
       ['B',40], 
       ['C',20], 
       ['D',10], 
       ['E',9] 
     ], 
     type: 'pie' 
    }, 
    pie: { 
     labels: { 
      show: true, 
      threshold: 0.1, 
      format: { 
       A: function (value, ratio, id) { 
        if(value=20) { 
         return "A<br/>9item<br/>20.2%"; 
        } 
       } 
      } 
     } 
    } 

}); 

ですが、私はd3jsコードの一部を使用する必要があります。しかし、私はd3jsに慣れていません。

私は非常に任意の提案に感謝しています。

Answer 1

これは少しquick and dirtyですが、それは仕事を取得します...

カンマがpie.label.format機能でリストを分離され、それは私の知識に（ここではHTMLを表示することはできませんので、私は、データを保存しています）：

pie: { 
    label: { 
     threshold: 0.1, 
     format: function(value, ratio, id) { 
     ratio = d3.format("%")(ratio); // format ratio 
     return [id, value, ratio].join(); // used to pass values to the onrender function 
     } 
    } 
    }, 

そしてonrenderedでの実際のフォーマッティング：

onrendered: function() { 
    d3.selectAll(".c3-chart-arc text").each(function(v) { 
     var label = d3.select(this); 
     var data = label[0][0].innerHTML.split(','); 

     var id = data[0]; 
     var value = data[1]; 
     var perc = data[2]; 

     d3.select(this).text("") 
     .append("tspan") 
     .text(id) 
     .attr("dy", 0) 
     .attr("x", 0) 
     .attr("text-anchor", "middle").append("tspan") 
     .text(parseInt(value)/4 + " item") 
     .attr("dy", "1.2em") 
     .attr("x", 0) 
     .attr("text-anchor", "middle") 
     .append("tspan") 
     .text(perc) 
     .attr("dy", "1.2em") 
     .attr("x", 0) 
     .attr("text-anchor", "middle"); 
    }); 
    } 
}); 

var chart = c3.generate({ 
 
    bindto: "#chart", 
 
    size: { 
 
    width: 500, 
 
    height: 300 
 
    }, 
 
    data: { 
 
    colors: { 
 
     A: 'yellow', 
 
     B: 'red', 
 
     C: 'green', 
 
     D: 'orange', 
 
     E: 'blue' 
 
    }, 
 
    columns: [ 
 
     ['A', 20], 
 
     ['B', 40], 
 
     ['C', 20], 
 
     ['D', 10], 
 
     ['E', 10] 
 
    ], 
 
    type: 'pie' 
 
    }, 
 
    pie: { 
 
    label: { 
 
     threshold: 0.1, 
 
     format: function(value, ratio, id) { 
 
     ratio = d3.format("%")(ratio); // format ratio 
 
     return [id, value, ratio].join(); // used to pass values to the onrender function 
 
     } 
 
    } 
 
    }, 
 
    onrendered: function() { 
 
    d3.selectAll(".c3-chart-arc text").each(function(v) { 
 
     var label = d3.select(this); 
 
     var data = label[0][0].innerHTML.split(','); 
 
     
 
     var id = data[0]; 
 
     var value = data[1]; 
 
     var perc = data[2]; 
 

 
     d3.select(this).text("") 
 
     .append("tspan") 
 
     .text(id) 
 
     .attr("dy", 0) 
 
     .attr("x", 0) 
 
     .attr("text-anchor", "middle").append("tspan") 
 
     .text(parseInt(value)/4 + " item") 
 
     .attr("dy", "1.2em") 
 
     .attr("x", 0) 
 
     .attr("text-anchor", "middle") 
 
     .append("tspan") 
 
     .text(perc) 
 
     .attr("dy", "1.2em") 
 
     .attr("x", 0) 
 
     .attr("text-anchor", "middle"); 
 
    }); 
 
    } 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.12/d3.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.11/c3.min.js"></script> 
 
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.11/c3.min.css"/> 
 
<div id="chart"></div>