Very Simple D3: How to Draw an Arc?

為{幸葍}努か 提交于 2020-01-11 08:41:29

问题


It would be nice to learn D3. After reading many examples, I think I understand it. My first project is to make a color wheel, without transitions for simplicity. But it appears even that is not simple enough for my first project! For project zero, I am trying to get something to show on the screen. Hopefully something I wrote (and dear read has fixed), and not an example.

What did I do wrong? 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)
    ;

Thank you


回答1:


Your example here doesn't have any data defined. If you just want to draw the svg statically, skip the selectAll() and data() bindings:

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

Or define some data and use that to drive the drawing:

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

(plus .attr("fill"... should be .style("fill"...)



来源:https://stackoverflow.com/questions/15103752/very-simple-d3-how-to-draw-an-arc

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!