javascript - How to add a simple arc with D3 - Stack Overflow

admin管理员组

文章数量:1244397

I would like to add one simple arc in the chart section like a circle:

vis.append("circle")
    .style("stroke", "gray")
    .style("fill", "white")
    .attr("r", 40)
    .attr("cx", 50)
    .attr("cy", 50);

The provided examples of D3 are working with data properties but i would like to see it without any underlying data.

I would like to add one simple arc in the chart section like a circle:

vis.append("circle")
    .style("stroke", "gray")
    .style("fill", "white")
    .attr("r", 40)
    .attr("cx", 50)
    .attr("cy", 50);

The provided examples of D3 are working with data properties but i would like to see it without any underlying data.

• javascript
• svg
• d3.js

Share Improve this question Follow asked Aug 22, 2012 at 14:07 OliverOliver 22111 gold badge44 silver badges1515 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 13

D3 uses a path generator for arcs. If you don't want to data-drive your arc just define the arc generator and add some methods...

var arc = d3.svg.arc()
    .innerRadius(50)
    .outerRadius(70)
    .startAngle(45 * (Math.PI/180)) //convert from degs to radians
    .endAngle(3) //just radians

vis.append("path")
    .attr("d", arc)
    .attr("transform", "translate(50,50)")

You can see a demo here: http://jsfiddle/h9XNz/

本文标签： javascriptHow to add a simple arc with D3Stack Overflow