_newArc() { return d3 .arc() .outerRadius(100) .innerRadius(20); }
d3.arc() .startAngle(d => x(d.x0)) .endAngle(d => x(d.x1)) .innerRadius(d => d.y0) .outerRadius(d => d.y1)
function createArc(data): string { return d3Shape .arc() .innerRadius(data.innerRadius || 0) .outerRadius(data.outerRadius || data.radius || 2) .startAngle(data.startAngle || 0) .endAngle(data.endAngle || 2 * Math.PI)(); }
// 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) }
_createPieChart(index) { var arcs = d3.shape.pie() .value(this._value) (this.props.data); var hightlightedArc = d3.shape.arc() .outerRadius(this.props.pieWidth/2 + 10) .padAngle(.05) .innerRadius(30); var arc = d3.shape.arc() .outerRadius(this.props.pieWidth/2) .padAngle(.05) .innerRadius(30); var arcData = arcs[index]; var path = (this.state.highlightedIndex == index) ? hightlightedArc(arcData) : arc(arcData); return { path, color: this._color(index), }; }
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)
const Arc = (props) => { const arc = d3.arc() .innerRadius(props.innerRadius) .outerRadius(props.outerRadius); return ( <Path d={arc(props.data)} style={{fill: props.color}} easing="cubicInOut" duration={300} /> ); }
.innerRadius(innerRadius) .outerRadius(outerRadius) .startAngle(startAngle)
.innerRadius(d => d*50/rings) .outerRadius(d => 50+d*50/rings) .startAngle((d, i, j) => angle(j))
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); })
function Pie(props) { const { data } = props; const arcs = pie()(data); const col = lab('darkgray', 'yellow'); const arcGen = arc() .innerRadius(0) .outerRadius(100); return ( <g> {arcs.map((a, i) => { const ratio = Math.abs(a.startAngle - a.endAngle) / 2 / Math.PI; return ( <path key={`arc${i}`} fill={col(ratio)} stroke={'white'} d={arcGen(a)} /> ); })} </g> ); }
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} /> ); }
const Arc = (props)=>{ const arc = d3.arc() .innerRadius(props.innerRadius) .outerRadius(props.outerRadius); return ( <Path d={arc(props.data)} style={{fill:props.color}} easing="cubicInOut" duration={300} /> ); }
arc() { return d3.arc() .innerRadius(this.props.innerRadius) .outerRadius(this.props.outerRadius) .startAngle(0) }
function createArc(data): string { return d3Shape .arc() .innerRadius(data.innerRadius || 0) .outerRadius(data.outerRadius || data.radius || 2) .startAngle(data.startAngle || 0) .endAngle(data.endAngle || 2 * Math.PI)(); }