Skip to content
View rd3-10-slice.js
class Slice extends React.Component {
constructor(props) {
super(props);
this.state = {isHovered: false};
this.onMouseOver = this.onMouseOver.bind(this);
this.onMouseOut = this.onMouseOut.bind(this);
}
onMouseOver() {
this.setState({isHovered: true});
View rd3-09-slice.js
render() {
let {value, label, fill, innerRadius = 0, outerRadius, cornerRadius, padAngle} = this.props;
let arc = d3.svg.arc()
.innerRadius(innerRadius)
.outerRadius(outerRadius)
.cornerRadius(cornerRadius)
.padAngle(padAngle);
return (/* */);
}
View rd3-08-pie.js
renderSlice(value, i) {
let {innerRadius, outerRadius, cornerRadius, padAngle} = this.props;
return (
<Slice key={i}
innerRadius={innerRadius}
outerRadius={outerRadius}
cornerRadius={cornerRadius}
padAngle={padAngle}
value={value}
label={value.data}
View rd3-07-app.js
<svg width="100%" height="100%">
<Pie x={x}
y={y}
innerRadius={radius * .35}
outerRadius={radius}
cornerRadius={7}
padAngle={.02}
data={this.props.data} />
</svg>
View rd3-06-slice.js
class Slice extends React.Component {
render() {
let {value, label, fill, innerRadius = 0, outerRadius} = this.props;
let arc = d3.svg.arc()
.innerRadius(innerRadius)
.outerRadius(outerRadius);
return (
<g>
<path d={arc(value)} fill={fill} />
{/* https://github.com/d3/d3/wiki/SVG-Shapes#arc_centroid */}
View rd3-05-pie.js
renderSlice(value, i) {
return (
<Slice key={i}
outerRadius={this.props.radius}
value={value}
label={value.data}
fill={this.colorScale(i)} />
);
}
View rd3-04-slice.js
class Slice extends React.Component {
render() {
let {value, fill, innerRadius = 0, outerRadius} = this.props;
// https://github.com/d3/d3/wiki/SVG-Shapes#arc
let arc = d3.svg.arc()
.innerRadius(innerRadius)
.outerRadius(outerRadius);
return (
<path d={arc(value)} fill={fill} />
);
View rd3-03-pie.js
class Pie extends React.Component {
constructor(props) {
super(props);
// https://github.com/d3/d3/wiki/Ordinal-Scales#category10
this.colorScale = d3.scale.category10();
this.renderSlice = this.renderSlice.bind(this);
}
render() {
let {x, y, data} = this.props;
View rd3-02-app.js
class App extends React.Component {
render() {
// For a real world project, use something like
// https://github.com/digidem/react-dimensions
let width = window.innerWidth;
let height = window.innerHeight;
let minViewportSize = Math.min(width, height);
// This sets the radius of the pie chart to fit within
// the current window size, with some additional padding
let radius = (minViewportSize * .9) / 2;
View rd3-01-installation.sh
npm install --save react react-dom d3-shape d3-scale
Something went wrong with that request. Please try again.