d3.pie() .sort(null) .padAngle(0.02) .value(function(d) { return d.population; })
const AnimatedPiechart = ({ x, y, r, data }) => { let pie = d3.pie() .value((d) => d.value)(data) .sort((a, b) => d3.ascending(a.data.i, b.data.i)), translate = `translate(${x}, ${y})`, colors = d3.scaleOrdinal(d3.schemeCategory10); return ( <g transform={translate}> {pie.map((d, i) => ( <Arc key={`arc-${i}`} data={d} innerRadius="0" outerRadius={r} color={colors(d.data.i)} /> ))} </g> ); }
_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), }; }
_pieChartData() { const { data, type } = this.state; return d3 .pie() .sort(null) .value(d => d[type])(data.filter(obj => obj[type] > 0)); }
render(){ const {x,y,r,data} = this.props; let pie = d3.pie() .value((d)=>(d.value))(data) .sort((a,b)=>d3.ascending(a.data.i,b.data.i)); let translate = `translate(${x},${y})`; let colors = d3.scaleOrdinal(d3.schemeCategory10); return ( <g transform={translate}> { pie.map((d,i)=>( <Arc key={i} data={d} innerRadius="0" outerRadius={r} color={colors(d.data.i)}/> )) } </g> ); }
.value((d) => d.population);
.value(valueMap) .padAngle(padAngle) (data);
d3.pie().value(d => +d.screentime)