Since React is only interested in the V (view) of MVC, it plays well with other toolkits and frameworks. This includes AngularJS and D3.
A app with React and D3.js:
/** @jsx React.DOM */ var App = React.createClass({ getInitialState: function () { return { data: [ {val: 5}, {val: 4}, {val: 7}, {val: 6}, {val: 8}, {val: 1} ] } }, componentWillMount: function () { setTimeout(function () { this.renderChart(this.state.data); }.bind(this), 100) }, renderChart: function (dataset) { d3.select("body") .selectAll('div') .data(dataset) .enter() .append('div') .attr('class', 'bar') .style('height', function (d) { console.log(d.val * 5 + 'px'); return d.val * 5 + 'px'; }); }, render: function () { return ( <div id="chart"></div> ) } }); React.render(<App />, document.getElementById('panel'));
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>React + D3 + AngularJS</title> <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css" /> <link rel="stylesheet" href="style.css"> </head> <body id="panel"> <script src="bower_components/react/react.min.js"></script> <script src="bower_components/react/JSXTransformer.js"></script> <script src="bower_components/d3/d3.min.js"></script> <script type="text/jsx" src="jsx/app.js"></script> </body> </html>
Integrating with Angular:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>React + D3 + AngularJS</title> <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css" /> <link rel="stylesheet" href="style.css"> </head> <body ng-app="app"> <div ng-controller="RenderChartController as chartCtrl"> <h1>chart 1</h1> <renderchart data="chartCtrl.data" id="rchart"></renderchart> <h1>chart 2</h1> <renderchart data="chartCtrl.data2" id="rchart2"></renderchart> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.12.2/react.js"></script> <script src="bower_components/d3/d3.min.js"></script> <script src="bower_components/angular/angular.min.js"></script> <script src="js/app.js"></script> <script src="js/angular-app.js"></script> </body> </html>
/** * Created by Answer1215 on 9/2/2015. */ /////////////// // controller ////////////// function RenderChartController($http){ var vm = this; $http.jsonp('http://filltext.com/?rows=010&val={randomNumber}&callback=JSON_CALLBACK') .success(function (data) { vm.data = data; }); $http.jsonp('http://filltext.com/?rows=010&val={randomNumber}&callback=JSON_CALLBACK') .success(function (data) { vm.data2 = data; }); } ////////////// // directive ////////////// function renderchart(){ return { restrict: 'E', scope: { data: '=', id: '@' }, link: function (scope, element, attrs) { scope.$watch('data', function (newVal, oldVal) { React.renderComponent( App({data: scope.data, target: scope.id}), element[0] ) }) } } } angular.module('app', []) .controller('RenderChartController',RenderChartController) .directive('renderchart', renderchart);
/** @jsx React.DOM */ var App = React.createClass({displayName: "App", defaultProps: function () { return { data: {}, id: '' } }, componentWillReceiveProps: function (nextProp) { if(nextProp.data){ this.renderChart(nextProp.data) } }, renderChart: function (dataset) { d3.select("#" + this.props.target) .selectAll('div') .data(dataset) .enter() .append('div') .attr('class', 'bar') .style('height', function (d) { return d.val * 5 + 'px'; }); }, render: function () { return ( React.createElement("div", {id: this.props.target}) ) } });