2012-05-08 18 views
5

Basit bir soru ... d3.svg.line jeneratörünü başarıyla kullanıyorum ancak şimdi genel satırdaki her bir segment üzerinde daha fazla denetim kullanabilmem gerekiyor. Örneğin, her segmentin farklı şekilde renklendirilmesi gerekebilir. Ya da her segmentin farklı bir kalınlığa (bitişik bölümlerin kalınlığına bağlı olarak daraltılması) ihtiyacı olabilir.Satır bölümlerini denetleme

Bunu başarmanın en iyi aracı nedir merak ediyorum. Düşünüyorum ya da belki. Ya da belki de sadece d3.svg.line kullanmaya devam edin, ancak her segmenti kendi satırında yapın. Zengin hat render bu tür diğer insanların deneyimleri arıyorsunuz

...

cevap

3

D3 bunun için hiçbir geçerli tesis var ama Protovis limana segmented lines bir open feature request yoktur. Protovis implementation biraz karmaşıktır çünkü bitişik çizgi parçaları için birleştirici birleşimlerini hesaplaması gerekir, ancak kesinlikle yapılabilir. SVG 2.0, okuyuculu bir yolun taslağını elde etmek için bir olanak içerebilir, bu da bunu saf JavaScript ile gerçekleştirme ihtiyacını ortadan kaldıracaktır.

Bu sırada, kendi satır bölümlerinizi oluşturmak için SVG'nin satır öğesini veya basit bir iki öğe d3.svg.line öğesini kullanabilirsiniz. Varsayılan strok-linecap özelliği, farklı açılarda bitişik çizgiler arasında boşluk bırakacaktır; Çakışmaları tercih ederseniz, stroke-linecap: round;'u kullanabilirsiniz.

+0

Bilgi için teşekkürler. Aslında segmentler farklı genişlikte ise, tadilat yapmak için d3.svg.area kullanmayı düşündüm. Ben henüz denemedim ama d3.svg.line'a çok benziyor, ancak genişliği azaltmak için y0, y1 kullanabiliyorum. Nasıl olduğunu göreceğiz. –

+0

Evet, d3.svg.area, satır segmentleri arasındaki dikey birleşimlerden memnunsanız iyi çalışır. – mbostock