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> ); }
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> ); }
const PieChart = ({ data }) => ( <svg width={width} height={height}> <g transform={`translate(${width / 2}, ${height / 2})`}> {pieChart(data).map((d, i) => ( <g key={i} className="arc"> <path d={dataArc(d)} fill={colour(d.data.label)} /> <text dy=".35em" transform={`translate(${labelArc.centroid(d)})`} > {d.data.label} </text> </g> ))} </g> </svg> )
render() { const { _newArc, _pieChartData, _handleClickPie } = this; return ( <Container> <Svg> <g transform="translate(250, 250)"> {_pieChartData().map(d => ( <path key={d.data.key} d={_newArc()(d)} onClick={_handleClickPie} fill="blue" opacity="0.5" stroke="black" strokeWidth="2px" cursor="pointer" /> ))} </g> </Svg> <JSONTable json={tweetsJSON.tweets} /> </Container> ); }
.attr("height", (data.columns.length - 1) * 20) .selectAll("g") .data(data.columns.slice(1).reverse()) .enter().append("g") .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; }); .data(data.sort(function(a, b) { return b.sum - a.sum; })) .enter().append("svg") .attr("class", "pie") .data(function(d) { return pie(d.ages); }) .enter().append("path") .attr("class", "arc") .attr("d", arc.outerRadius(r).innerRadius(r * 0.6)) .style("fill", function(d) { return color(d.data.age); });
const PieChart = ({ data, width, height }) => { return ( <svg width={width} height={height} viewBox={`0 0 ${size} ${size}`} > <g transform={`translate(${radius}, ${radius})`}> {pieChart(data).map((d, i) => ( <g key={i} className="arc"> <path d={dataArc(d)} fill={colour(d.data.label)} /> <text dy=".35em" transform={`translate(${labelArc.centroid(d)})`} > {d.data.label} </text> </g> ))} </g> </svg> ); }