Bardzo prosty D3: jak rysować łuk?

Question

Byłoby miło nauczyć się D3. Po przeczytaniu wielu przykładów myślę, że to rozumiem. Moim pierwszym projektem jest wykonanie koła kolorów, bez przejść dla uproszczenia. Ale wydaje się, że nawet to nie jest proste dla mojego pierwszego projektu! Dla zerowego projektu próbuję wyświetlić coś na ekranie. Mam nadzieję, że napisałem coś (i poprawiła się droga do czytania), a nie przykład.

Co zrobiłem źle? http://jsfiddle.net/aGdMX/1/

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) 
    ; 

Dziękuję

Answer 1

Twój przykład tutaj nie ma żadnych danych zdefiniowane. Jeśli chcesz po prostu zwrócić SVG statycznie, pomiń selectAll() i dane() Wiązania:

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

lub zdefiniować pewne dane i używa ich do napędzania rysunek:

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

(plus .attr("fill" ... powinno być .style("fill" ...)