arcData.forEach((arc, i) => { const component = this._components[arc.index]; component && component.setNativeProps(arc); });
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> ); }
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 filteredProps = omit(this.props, args); const arcData = getArcData(this.generator, this.data.values); const renderArc = this.props.renderArc || this.renderArc; return ( <G ref={component => (this._component = component)} {...filteredProps} > {arcData.map((arc, i) => { const element = renderArc(arc, i); if (element) { return React.cloneElement(element, { ref: component => (this._components[arc.index] = component) }); } return element; })} </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> ); }
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> ); }
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> ); }
.style('fill', 'white') .style('font-size', 10) .text(d => this.format(d.value));
.attr("class", "arc") .attr("d", arc.outerRadius(r).innerRadius(r * 0.6)) .style("fill", function(d) { return color(d.data.age); });
arcData.forEach((arc, i) => { const component = this._components[arc.index]; component && component.setNativeProps(arc); });
render() { const filteredProps = omit(this.props, args); const arcData = getArcData(this.generator, this.data.values); const renderArc = this.props.renderArc || this.renderArc; return ( <G ref={component => (this._component = component)} {...filteredProps} > {arcData.map((arc, i) => { const element = renderArc(arc, i); if (element) { return React.cloneElement(element, { ref: component => (this._components[arc.index] = component) }); } return element; })} </G> ); }
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> ); }