非常简单D3:如何画弧?

时间:2013-02-27 03:40:08

标签: javascript svg d3.js

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

谢谢

1 个答案:

答案 0 :(得分:11)

此处的示例没有定义任何数据。如果您只想静态绘制svg,请跳过selectAll()和data()绑定:

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" ...)