D3 Ringdiagramm auf Basis von Jahreszeit mit festen Etikett

Question

Nach erfolgreich ein paar Diagramme mit D3 zu schaffen Ich bin jetzt eine Legende für eine Karte zu erstellen versuchen, die wie folgt aussieht:

Dies ist eine Darstellung der Jahreszeiten fast ein Jahr lang, dargestellt durch Farben unter den fixierten Etiketten, die jeden Monat eines Jahres anzeigen (im Bild sind sie auf Monate abgerundet, ich möchte nicht, dass das in der Donut-Tabelle geschieht, die ich erstellen möchte) .

Jetzt dachte ich, ich würde beginnen, indem Sie eine example eines Donut-Diagramms auf der D3js Seite folgen, und fügen Sie dann eine Art von fixierten Etiketten danach. Bevor ich zu diesem Punkt komme, finde ich mich jedoch fest und kann das Beispiel nicht wiederholen.

Ich habe versucht, ein prägnantes Beispiel zu machen mit Plunkr here, und ich frage mich, ob jemand einen Blick darauf werfen würde. Ich habe einen Ansatz verfolgt, der beschrieben here, um ein erstelltes Objekt als Dateneingabe zu verwenden, ich sehe nichts falsch damit, aber vielleicht täusche ich mich. Die Fehlermeldung erhalte ich ist wie folgt:

Uncaught TypeError: Cannot read property 'indexOf' of undefined: Main.js(1494) 

Linie 1494 entspricht 37 auf der Plunkr auszukleiden, Lesen:

.append(g) 

Dies führt mich zu glauben, dass etwas nicht in Ordnung ist, wenn ich darauf d3 zu den Daten, aber ich bin mir nicht sicher, was das ist. Ich würde mich über ein frisches Paar Augen freuen!

Answer 1

Sie haben ein paar Probleme:

Zuerst Sie population nach dem Kopieren/Einfügen Bostock Beispiel ändern vergessen. Habe ich es für dur:

var pie = d3.layout.pie() 
.sort(null) 
.value(function(d) { 
    return d.dur 
}); 

Danach habe ich Ihre Daten ändern musste:

var data = [ 
{ seizoen: "lente", dur: 60 }, 
{ seizoen: "zomer", dur: 122 }, 
{ seizoen: "herfst", dur: 61 }, 
{ seizoen: "winter", dur: 122 } 
]; 

Auch vergessen Sie # zu verwenden, um die ID des div auszuwählen:

var svg = d3.select("#legend").append("svg") 

Btw, Ihr Pfad zu jquery war falsch, und die #Legend in Ihrem CSS war sehr wenig.

Jetzt haben Sie einen Donut: http://plnkr.co/edit/B2CJMN7Wy1By0jlMpkii?p=preview