var D3Chart = React.createClass({
propTypes: {
width: React.PropTypes.number.isRequired,
height: React.PropTypes.number.isRequired,
children: React.PropTypes.node,
},
render: function() {
return (
<svg width={this.props.width} height={this.props.height}>
{this.props.children}</svg>
);
}
});
var D3PieChart = React.createClass({
propTypes: {
width: React.PropTypes.number,
height: React.PropTypes.number,
title: React.PropTypes.string,
data: React.PropTypes.array.isRequired,
},
getDefaultProps: function() {
return {
width: 300,
height: 350,
title: '',
Legend: true,
};
},
render: function() {
return (
<div>
<D3Chart width={this.props.width} height={this.props.height}/>
<p>Something is going on.</p>
</div>
);
}
});
var data = [
{name: "Apples", count: 10},
{name: "Oranges", count: 20},
{name: "Bananas", count: 5},
{name: "Blueberries", count: 42},
{name: "mangoes ", count: 29}
];
React.render(<D3PieChart data={data}/>, document.body);
<script src="http://fb.me/react-js-fiddle-integration.js"></script>
External resources loaded into this fiddle: