Çok Basit D3: Bir Arc Nasıl Çizilir?

Question

D3'ü öğrenmek güzel olurdu. Pek çok örneği okuduktan sonra anladım. İlk projem, sadelik için geçişler olmadan bir renk tekerleği yapmaktır. Ama bu, ilk projem için yeterince basit değil bile görünüyor! Proje sıfır için, ekranda gösterilecek bir şey elde etmeye çalışıyorum. Umarım yazdığım bir şey (ve sevgili okuma sabittir), bir örnek değil.

Neyi yanlış yaptım?

var arc = d3.svg.arc() 
    .innerRadius(40) 
    .outerRadius(100) 
    .startAngle(0) 
    .endAngle(1) 
    ; 

var chart = d3.select("body").append("svg:svg") 
    .attr("class", "chart") 
    .attr("width", 420) 
    .attr("height", 420).append("svg:g") 
    .attr("transform", "translate(200,200)") 
    ; 

chart.selectAll("path") 
    .data(data) 
    .enter().append("svg:path") 
    .attr("fill", function(d, i){ 
     return d3.rgb("black"); 
    }) 
    .attr("d", arc) 
    ; 

http://jsfiddle.net/aGdMX/1/ Eğer

Answer 1

Buradaki örnek tanımlanan herhangi bir veri bulunmamaktadır ederiz.

chart 
    .append("svg:path") 
    .attr("fill", function(d, i){ 
     return d3.rgb("black"); 
    }) 
    .attr("d", arc) 
    ; 

Veya bazı verileri tanımlamak ve çizim götürmek için kullanabilirsiniz:

http://jsfiddle.net/findango/aGdMX/2/

(sadece statik olarak svg çizmek istiyorsanız, SelectTüm() ve veri() bağlamaları atlama artı .attr("fill" ... .style("fill" olmalıdır ...)