function createChart(dom, props){
d3.select(dom).append('h1').text("Hello World");
}
var PieChart = 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>
<h4> {this.props.title} </h4>
</div>
);
},
componentDidMount: function() {
var dom = this.getDOMNode();
createChart(dom, this.props);
},
shouldComponentUpdate: function() {
var dom = this.getDOMNode();
createChart(dom, this.props);
}
});
var data = [
{name: "Apples", count: 10},
{name: "Oranges", count: 20},
{name: "Bananas", count: 5},
{name: "Blueberries", count: 42},
{name: "mangoes ", count: 29}
];
React.render(<PieChart data={data} title="Sample Fruits"/>, document.body);
<script src="http://fb.me/react-js-fiddle-integration.js"></script>
External resources loaded into this fiddle: