ändern Farbbereich in einem d3 wieder verwendbaren Ringdiagramm auf der Anzahl der Datenpunkte in Abhängigkeit

Question

dieses wiederverwendbare Diagramm als Basis verwenden: http://bl.ocks.org/nnattawat/9368297

ich einen Weg zu finden, ich versuche, den Farbbereich Satz auf die Anzahl der Basis zu ändern Bögen (Größe), ohne den Haupt Donut() neu schreiben zu müssen.

Zum Beispiel, ein Donuts getData Größe wäre 2 (mit den Farben grün und grau), und eine andere Donuts getData Größe wäre 3 (jetzt entfernen grau und ändern Sie die Farben zu grün, rot und gelb).

Ich kann die Farben nicht von donut() entfernen, es scheint, also habe ich versucht, einen Weg zu finden, vielleicht Farben bestimmten Datenpunkten zuzuordnen, aber ich kann das mit dieser Vorlage nicht herausfinden.

Bearbeiten: Angeben von bereits vorgenommenen Codeänderungen.

Ich habe 6 verschiedene getData Funktionen, etwa wie folgt:

var getFirstDonutData = function() { 
    var size = 2; 
    var data = [firstData1, firstData2]; 
    var text = ""; 
    d3.select("#data"); 
    return data; 
}; 

var getSecondDonutData = function() { 
    var size = 3; 
    var data = [secondData1, secondData2, secondData3]; 
    var text = ""; 
    d3.select("#data"); 
    return data; 
}; 

var getThirdDonutData = function() { 
    var size = 2; 
    var data = [thirdData1, thirdData2]; 
    var text = ""; 
    d3.select("#data"); 
    return data; 
}; 

Dann 6 verschiedene der folgenden:

var twoPointDonut = donut() 
       .$el(d3.select("#twoPointDonut ")) 
       .data(getFirstDonutData()) 
       .render(); 

var threePointDonut = donut() 
       .$el(d3.select("#threePointDonut ")) 
       .data(getSecondDonutData()) 
       .render(); 

var otherTwoPointDonut = donut() 
       .$el(d3.select("#otherTwoPointDonut ")) 
       .data(getThirdDonutData()) 
       .render(); 

Answer 1

Die Füllung des Lichtbogens durch die color() Funktion auf dieser Leitung bestimmt wird, :

.style("fill", function(d) { return color(d.data.key); }); 

Anstelle einer Funktion können wir wählen eine Reihe von Farben basierend auf dem Index. Ändern Sie die obige Zeile zu lesen:

.style("fill", function(d, i) { return color[i]; }); 

Jetzt müssen wir die Liste der verfügbaren Farben ändern basierend auf der Anzahl von Datenpunkten (Anzahl der Schlüssel in dem Datenobjekt). Oberhalb der color() Funktion hinzufügen:

var dataSize = Object.keys(getData()).length 
var color = d3.scale.category20(); // This line was already here 

Schließlich müssen wir auf ein Array die color Variable aus einer Funktion ändern. Das Array wird basierend auf der dataSize variieren, so eine switch Anweisung funktioniert hier sehr gut. Ersetzen Sie die Farbdefinition:

var color; 

switch (dataSize) { 
    case 2: 
    color = ['green' , 'gray']; 
    break; 
    case 3: 
    color = ['green', 'red', 'yellow']; 
    break; 
} 

Dadurch erhalten Sie grün und grau, wenn nur zwei Datenpunkte vorhanden sind; und grün, rot und gelb, wenn 3 Datenpunkte vorhanden sind. Sie können mehr case s für mehr Datenpunkte hinzufügen.

Everything in one JSFiddle.

Mit zwei Datenpunkte:

Mit drei Datenpunkte:

---

Edit: Da Sie mehr als ein Diagramm und eine Reihe von Daten auf der gleichen Seite verwenden, müssen Sie diesen ganzen Block zu innerhalb die Object.render() Funktion bewegen:

var dataSize = Object.keys(getData()).length; 
var color; 

switch (dataSize) { 
    case 2: 
    color = ['green' , 'gray']; 
    break; 
    case 3: 
    color = ['green', 'red', 'yellow']; 
    break; 
} 

und ändern Sie dann die dataSize Variable die bekommen Länge des in data Objekts Schlüssel übergeben:

var dataSize = Object.keys(data).length; 

New complete JSFiddle.