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>

을