2017-10-13 15 views
0

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.

Répondre

0

L'étiquette de tranche de tarte n'est pas si la partie tranche ne parvient pas à un certain seuil, mais la fonction qui fait cela peut être changé comme si:

oninit: function() { 
    this.meetsArcLabelThreshold = function() { return true; }; 
} 

Voir: http://jsfiddle.net/2hsr20hm/