2013-02-27 16 views
6

D3を学ぶのはいいですね。多くの例を読んだ後、私はそれを理解していると思う。私の最初のプロジェクトは、単純化のためにトランジションなしでカラーホイールを作ることです。しかし、私の最初のプロジェクトではそれほど簡単ではないようです。プロジェクトゼロのために、私は画面に何かを表示しようとしています。うまくいけば私が書いた(そして親愛なる読書は固定されている)、そして例ではない。非常に単純なD3:円弧を描くには?

どうしたのですか? 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) 
    ; 

ここ

答えて

11

あなたの例では、すべてのデータが定義されていない、ありがとうございました。あなただけの静的SVGを描きたい場合は、(のSelectAllをスキップ)とデータ()バインディング:

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

または、いくつかのデータを定義し、図面を駆動するためにそれを使用:

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

(プラス.attr("fill" ... .style("fill" ...)

+0

ありがとうございました。作業中のjsfiddleリンクをありがとうございます。私はこのような簡単な例で1つ以上の間違いをすることができることに失望しています。 –

関連する問題