D3: ark büyüyor ile gösterge tablosu

Question

Artan bir yay gibi 5 seviyesini gösteren bir şey elde etmek istiyorum (resme bakın). Verilerimin sadece 1-5 arasında bir tamsayı değeri var. Simgeyi şimdilik şimdilik görmezden gelebilirsiniz. D3'te böyle bir şey elde etmek için herhangi bir olasılık var mı? Bunun için bir örnek bulamadım. Üstelik kesilmiş bir pasta (çörek) grafik yaklaşımı ile denedim ama büyüyen yayı yapamadım ... Herhangi bir yardım için minnettarım! Bunun için teşekkürler. nispeten basit resim olduğundan

Answer 1

Harici görüntüler, SVG sprite'ları veya DOM'daki herhangi bir şey bağımlı olmadan d3 ile bunu yapabilirsiniz - sadece d3.js.

İşte bir working fiddle. Uygulama aşağıda açıklanmıştır. Ama ayrıca, burada büyüyen ark üzerinde bir klip yolunu canlandıran bir more advanced keman var. Maskenin kırpmadan nasıl göründüğünü görmek için its predecessor'a bakın. İlk olarak, grafikleri d3 ile bağladığınız bir veri dizisi olarak göstermeniz gerekir. Özellikle, bir renk ve bir "çizgi komutu" gerek (Dize <path d="..."> gibi d atamak şey böyle. Sonra

var segmentData = [ 
    { color:"#ED6000", cmd:"M42.6,115.3c5.2,1.5,11,2.4,16.8,2.4c1.1,0,2.7,0,3.7-0.1v-2.2c-7,0-13.1-1.3-18.8-3.6L42.6,115.3z" }, 
    { color:"#EF7D00", cmd:"M25.7,99.3c4.3,4.7,9.5,8.6,15.3,11.3l-1.4,3.8c-6.9-2.4-13.2-6.1-18.6-10.8L25.7,99.3z" }, 
    { color:"#F4A300", cmd:"M23.7,97c-5.2-6.4-8.8-14-10.3-22.4L2.9,75.7c2.9,10,8.5,18.9,15.8,25.9L23.7,97z" }, 
    { color:"#F7BC00", cmd:"M13,71.5c-0.2-2-0.4-4-0.4-6c0-10.7,3.4-20.6,9.2-28.8L9.4,28.3c-5.6,9-8.9,19.6-8.9,30.9 c0,4.6,0.6,9.1,1.6,13.5L13,71.5z" }, 
    { color:"#FFCF36", cmd:"M63,15.7V0.8c-1-0.1-2.5-0.1-3.7-0.1c-19.9,0-37.5,9.9-48.1,25l12.7,8.6C33.1,23,46,15.7,63,15.7z" } 
]; 

boş bir <svg> ve muhtemelen onun içinde bir <g>, içine gerekir çizmek grafikleri:

var svg = d3.select("body").append("svg") 
    .attr("width", 125) 
    .attr("height", 125); 

var gauge = svg.append("g"); 

Sonra segmentleri oluşturmak için bağlayıcı D3 kullanın:

var segments = gauge.selectAll(".segment") 
    .data(segmentData); 
segments.enter() 
    .append("path") 
    .attr("fill", function(d) { return d.color; }) 
    .attr("d", function(d) { return d.cmd; }); 

Bu sadece gr yaratır aphic, ancak bir tamsayı değerine göre renklendirmez. update(4) son segmentte ancak tüm renk olacak çağrılması

function update(value) { 
    segments 
     .transition() 
     .attr("fill", function(d, i) { 
      return i < value ? d.color : "#ccc"; 
     }) 
} 

: Bunun için, bir update fonksiyonunu tanımlayabiliriz. Hiçbiri update(0) numaralı rengi çağırıyor (hepsi griye dönüşüyor).

Kümede, update'u setTimeout temelinde yeni bir değerle çağıran tick() işlevi var, ancak bu yalnızca demo içindir. İsterseniz

Son olarak, tüm bu kodu sarıp [Bu yazıda] öneriler izlenerek yeniden kullanılabilir bir bileşen oluşturabilir. ( http://bost.ocks.org/mike/chart/)

Answer 2

, ben 5 varyasyonları ile, bir sprite kullanmayı tercih ediyorum. Bu, d3'ü kullanmaktan çok daha kolay ve aynı sonucu veriyor. (http://spritepad.wearekiss.com/ gibi bazı çevrimiçi araçları kullanabilirsiniz)

Answer 3

Duolingo ilerleme görüntülerini taklit etmek istiyorsanız, çözümlerini yalnızca kendi görüntüleriyle kopyalayabilirsiniz. Sprite'ı şu şekilde kullanıyorlar: http://d7mj4aqfscim2.cloudfront.net/images/skill-strength-sprite2.svg d3.js yaklaşımı değil. Bu size çok zaman ve çaba kazandıracaktır.