je travaille avec la bibliothèque C3 pour créer un diagramme circulaire et en utilisant D3 pour personnaliser certaines propriétés que C3 n'alow.
Je me déplace les étiquettes C3 créer à l'intérieur de l'arc dans la tarte à l'extérieur, mais quand l'arc est étroit l'étiquette ne semble pas.
Je pense est une option interne qui désactivent les étiquettes, car dans des conditions normales, il ne correspond pas. Comment puis-je «réactiver» l'étiquette même si elle ne correspond pas?
Voici mon code pour créer le graphique:SOLVE: C3 - Etiquettes ne pas montrer dans le graphique circulaire C3 Whit arcs étroits
function pie(d1, d2, d3, d4, d5) {
var id = '"#C"'
var chart = c3.generate({
bindto: '#C',
size: {
width: 1275,//550,
height: 834//350
},
data: {
columns: [
d1,
d2,
d3,
d4,
d5
]
},
type: 'pie'
},
pie: {
label: {
format: function(value, ratio, id)
{
return d3.format('')(value)
},
show: true,
threshold: -1
}
},
legend: {
show: false
}
});
Et le code pour déplacer les étiquettes en dehors du tableau avec d3.js
var pie-labels= d3.selectAll(".c3-chart-arc > text").each(function(v) {
var label = d3.select(this);
var pos = label.attr("transform").match(/-?\d+(\.\d+)?/g);
var h = (pos[0]*pos[0]+pos[1]*pos[1]);
// pos[0] is x, pos[1] is y. Do some position changes and update value
//135000 is the radio of the chart
label.attr("transform", "translate("+ (pos[0]/h*135000) +","+ (pos[1]/h*135000) +")");
Lorsque les données ont des valeurs similaires et les arcs sont semblables , il n'y a pas de problème, mais il apparaît en travaillant avec des données inégales.