d3.arc() .startAngle(d => x(d.x0)) .endAngle(d => x(d.x1)) .innerRadius(d => d.y0) .outerRadius(d => d.y1)
arc() { return d3.arc() .innerRadius(this.props.innerRadius) .outerRadius(this.props.outerRadius) .startAngle(0) }
_newArc() { return d3 .arc() .outerRadius(100) .innerRadius(20); }
d3 .arc() // imagine your doing a part of a donut plot .innerRadius(innerRadius) .outerRadius(function(d) { return yScale(d.amount); }) .startAngle(function(d) { return xScale(d.name); }) .endAngle(function(d) { return xScale(d.name) + xScale.bandwidth(); }) .padAngle(0.05) .padRadius(innerRadius)
.range([0, 2*Math.PI]); const arc = d3.arc() .innerRadius(d => d*50/rings) .outerRadius(d => 50+d*50/rings)
.sort(null); this.createArc = d3 .arc() .innerRadius(props.innerRadius) .outerRadius(props.outerRadius);
d3.arc() .startAngle(function (d) { return d.x0; }) .endAngle(function (d) { return d.x1; }) .innerRadius(function (d) { return Math.sqrt(d.y0); }) .outerRadius(function (d) { return Math.sqrt(d.y1); })
const Arc = ({arcData, color, innerRadius, outerRadius}) => { const arc = d3 .arc() .outerRadius(outerRadius) .innerRadius(innerRadius) (arcData); return ( <Shape d={arc} fill={color} stroke='#000' strokeWidth={1} /> ); }
// Returns a d3 arc // Which starts at 0 (top-center of circle) // Has an inner radius of 100px and outer radius of 110px arc() { return d3.arc() .innerRadius(this.props.innerRadius) .outerRadius(this.props.outerRadius) .startAngle(0) }