2016-04-06 16 views
0

D3 için oldukça yeni ve her satır için benzersiz çubuklarla yığılmış çubuk grafik (veya sütun grafik) yapmaya çalışıyorum veri kümesindeki gözlem).D3 yığılmış çubuk grafik: her satır için benzersiz bir çubuk (yığın sadece bir satır)

Karşılaştığım sorun: y eksenleri için aynı değere sahip birden fazla satır varsa (durumda, data.csv dosyasında "seq", "3" ve "4" sütununda) , daha sonra farklı satırlardan aynı adı (tüm veriler) böyle biraraya yığılır) iki kez görünür:

enter image description here

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 

Ama benim yapmaya çalıştığım şey bu d.seq'in aynı değerlerine rağmen her satır için bir çubuk yapmaktır (böylece d.seq = 3 ve d.seq = 4) için iki çubuk olmak

Şimdi üzerinde çalışıyorum tam kod here

takdir edilecektir Herhangi bir öneri, sayesinde!

cevap

0

"Dizi" değeri yerine veri dizininizin dizinine göre çizim yapabilirsiniz. Endeks benzersiz olacak. http://plnkr.co/edit/vtsfWSB7etegM9VfI6mM?p=preview

Sadece iki satır

hat 86 güncelledik:

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

hat 112:

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

yine y-kene etiket değeri göstermek isterseniz "seq", eksenler hakkında daha fazla bilgi edinebileceğiniz ve özel etiketlerin nasıl uygulanacağı hakkında bir göz atın: https://github.com/mbostock/d3/wiki/SVG-Axes

DÜZENLEME

nasıl istiyorsunuz Çok eksenini etiket gibi veri dizisi d3.csv başarı fonksiyonu içinde yEkseni tanımını taşıyabilir ve sonra başvurmak gerekir http://plnkr.co/edit/6sNaLwiSSm7aU66qzIOK?p=preview

:

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

Çözüm için çok teşekkürler. Ama evet hala "seq" değerlerini y-tick etiketi olarak göstermem gerekiyor ama yine de bunu anlayamıyorum. Biliyorum 'Tickformat' kullanılmalıdır ama eğer yAxis = d3.svg.axis() .scale (y) .tickFormat (function (d) {return d.seq;}); . – tiffkyn

+0

Düzenleme konusuna bakın. TickFormat işlevine ilettiğiniz "d", veri diziniz değil, yalnızca onay değeridir. YAxis tanımını d3.csv çağrısının içine taşımanız ve veri dizinize açıkça başvurmanız gerekir. – James

+0

@James Cevabınız için çok teşekkürler! Beni kurtardı! – PrincessBelle

İlgili konular