[React] React Fundamentals: Integrating Components with D3 and AngularJS

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})
        )
    }
});

相关阅读:
重构drf后的环境变量配置
 分离的前后台交互
 虚拟环境的搭建
 Python
Python
Python
Python操作MongoDb数据库
 Python操作SQLite/MySQL/LMDB
数据库-如何创建SQL Server身份验证用户
 Python
原文地址：https://www.cnblogs.com/Answer1215/p/4779851.html