D3 gestapelt Balkendiagramm: eindeutige Leiste für jede Zeile (nur eine Zeile Stapel)

Question

Ich bin ziemlich neu in D3 und ich versuche, ein gestapeltes Balkendiagramm (oder Säulendiagramm) mit eindeutigen Balken für jede Zeile (jeweils Beobachtung) im Datensatz.

Das Problem, das ich festgestellt habe, ist: Wenn es mehr als eine Zeile mit dem gleichen Wert für die y-Achsen verwendet (in meinem Fall in data.csv, in der Spalte "Seq", "3" und "4" erscheint zweimal), dann mit dem gleichen Namen alle Daten (aus verschiedenen Zeilen) zusammen, wie diese gestapelt werden:

data.csv

seq,Idle Time,Answer Time 
2,95,4 
1,0,3 
3,22,3 
4,0,4 
6,43,3 
5,0,2 
8,30,1 
7,0,3 
4,20,5 
3,0,8 

Aber was ich versucht habe zu tun ist es, einen Balken für jede Zeile zu machen, trotz der identischen Werte von d.seq (so dass es werden zwei Bars für d.seq = 3 und d.seq = 4)

Der vollständige Code arbeite ich jetzt an ist here

werden Anregungen dankbar, danke!

Answer 1

Sie können Plot basierend auf dem Index Ihres Datenarrays statt auf dem "Seq" -Wert erstellen. Der Index wird eindeutig sein. http://plnkr.co/edit/vtsfWSB7etegM9VfI6mM?p=preview

Ich habe nur zwei Zeilen aktualisiert

Linie 86:

y.domain(data.map(function(d, i) { return i; })); 

Linie 112:

.attr("transform", function(d, i) { return "translate(0," + y(i) + ")"; }); 

Wenn Sie immer noch das y-tick-Label wollen den Wert zeigen, in "seq", schauen Sie sich hier an, wo Sie mehr über Achsen und wie Sie benutzerdefinierte Etiketten anwenden können: https://github.com/mbostock/d3/wiki/SVG-Axes

EDIT

http://plnkr.co/edit/6sNaLwiSSm7aU66qzIOK?p=preview

Sie müssen die yAchse Definition innerhalb der d3.csv Erfolg Funktion bewegen, und dann das Datenfeld verweisen, wie so die Achse zu beschriften, wie Sie möchten:

var yAxis = d3.svg.axis() 
    .scale(y) 
    .tickFormat(function(i) {return data[i].seq; }) 
    .orient("left");