function createGenerator(props, generator?: Pie): Pie { generator = generator || d3.pie(); return args.reduce((acc: Pie, arg) => { const prop = props[arg]; if (prop) { return acc[arg](prop); } return acc; }, generator); }
chart.append('g') .attr('class', 'pie') .selectAll('.arc') .data(pie(data).sort((a, b) => b.data.screentime - a.data.screentime)) .enter() .append('path') .attr('d', arc) .classed('arc', true) .attr('fill', d => color(d.data.itemLabel))
pie() .sort(null) .value(d => d.value)
_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), }; }
pie() .value(d => d.value)
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> ); }
.data(function(d) { return pie(d.ages); }) .enter().append("path") .attr("class", "arc")
function createGenerator(props, generator?: Pie): Pie { generator = generator || d3.pie(); return args.reduce((acc: Pie, arg) => { const prop = props[arg]; if (prop) { return acc[arg](prop); } return acc; }, generator); }
pie() .sort(null) .value(d => d.value)