2017-10-13 4 views
0

Ich arbeite mit der C3-Bibliothek, um ein Kreisdiagramm zu erstellen und D3 zu verwenden, um einige Eigenschaften anzupassen, die C3 nicht erlaubt.
Ich verschiebe die Etiketten, die C3 innerhalb des Bogens in den Kuchen außerhalb erstellen, aber wenn der Bogen schmal ist, wird das Etikett nicht angezeigt.
Ich denke, eine interne Option, die die Etiketten deaktivieren, da unter normalen Bedingungen nicht passt. Wie kann ich das Label wieder aktivieren, auch wenn es nicht passt?
Hier ist mein Code, um das Diagramm zu erstellen:SOLVE: C3 - Etiketten, die nicht im C3-Kreisdiagramm mit schmalen Bögen angezeigt werden

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 
    } 
}); 

Und der Code zu bewegen, um die Etiketten außerhalb des Diagramms mit 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) +")"); 

Wenn die Daten haben ähnliche Werte und die Bögen sind ähnlich Es gibt kein Problem, aber es erscheint während der Arbeit mit ungleichen Daten.

Antwort

0

Das Tortenstück Etikett gezogen wird nicht, wenn die Scheibe eine bestimmte Schwelle nicht erreicht, aber die Funktion, die dies als so geändert wird, tut kann:

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

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

Verwandte Themen