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

        )

    }

});

[React] React Fundamentals: Integrating Components with D3 and AngularJS的更多相关文章

  1. [React] react+redux+router+webpack+antd环境搭建一版

    好久之前搭建的一个react执行环境,受历史影响是webpack3.10.0和webpack-dev-server2.7.1的环境,新项目准备用webpack4重新弄弄了,旧的记录就合并发布了(在没有 ...

  2. React/React Native 的ES5 ES6写法对照表

    //es6与es5的区别很多React/React Native的初学者都被ES6的问题迷惑:各路大神都建议我们直接学习ES6的语法(class Foo extends React.Component ...

  3. React/React Native 的ES5 ES6写法对照表－b

    很多React/React Native的初学者都被ES6的问题迷惑:各路大神都建议我们直接学习ES6的语法(class Foo extends React.Component),然而网上搜到的很多教 ...

  4. React: React组件的生命周期

    一.简介 在前面的第二篇博文中对组件的生命周期虽然做了一个大略介绍,但总感觉说的过于简单,毕竟生命周期是React组件的核心部分.在我们熟练使用React挂载和合成组件来创建应用表现层的过程中,针对数 ...

  5. React: React的属性验证机制

    一.简介 在开发中,属性变量类型的验证,几乎是任何语言都必须关注的问题,因为如果传入的数据类型不对,轻者程序运行仅仅是给出警告⚠️,严重的会直接导致程序中断,APP闪退或者web页面挂掉,这是很严重的 ...

  6. React/react相关小结

    React React组件由React元素组成,React组件使用React.Component或React.PureComponent来生成:React元素使用JSX的语法来编写或使用React.c ...

  7. [React Fundamentals] Composable Components

    To make more composable React components, you can define common APIs for similar component types. im ...

  8. [React] React Fundamentals: Using Refs to Access Components

    When you are using React components you need to be able to access specific references to individual ...

  9. [React] React Fundamentals: Mixins

    Mixins will allow you to apply behaviors to multiple React components. Components are the best way t ...

随机推荐

  1. Svn与Git的区别

    把第一条理解到位思想到位了做起来才会有的放矢,其他几条都是用的时候才能体会到 1) 最核心的区别Git是分布式的,而Svn不是分布的.能理解这点,上手会很容易,声明一点Git并不是目前唯一的分布式版本 ...

  2. RecordSet .CacheSize, Properties,CurserType,PageSize

    使用 CacheSize 属性可以控制一次要从提供者那里将多少个记录检索到本地内存中.例如,如果 CacheSize 为 10,首次打开 Recordset 对象后,提供者将把前 10 个记录检索到本 ...

  3. C#获取硬盘空间信息

    /// <summary> /// 获取指定驱动器的空间总大小(单位为B) /// </summary> /// <param name="str_HardDi ...

  4. Delphi中快捷键的使用

    CTRL+SHIFT+↑(↓) 在过程.函数.事件内部, 可跳跃到相应的过程.函数.事件的定义(在INTERFACE和IMPLEMENTATION之间来回切换)CTRL+J (弹出DELPHI语句提示 ...

  5. Java语言基础（一） 标识符

    Java标识符的问题: ①不可以以数字开头 int 123number = 0; //错误 ②可以使用任意的货币符号(￥和$等等)中文也可以  int $i = 0; //正确 int ￥i = 1; ...

  6. Android开源项目发现--- 工具类依赖注入DI篇（持续更新）

    通过依赖注入减少View.服务.资源简化初始化,事件绑定等重复繁琐工作 1. AndroidAnnotations(Code Diet) android快速开发框架 项目地址:https://gith ...

  7. Node.js权威指南 (4) - 模块与npm包管理工具

    4.1 核心模块与文件模块 / 574.2 从模块外部访问模块内的成员 / 58 4.2.1 使用exports对象 / 58 4.2.2 将模块定义为类 / 58 4.2.3 为模块类定义类变量或类 ...

  8. WebSorcket学习

    传统 Web 模式在处理高并发及实时性需求的时候经常采用以下方案: 1.轮询,原理简单易懂,就是客户端通过一定的时间间隔以频繁请求的方式向服务器发送请求,来保持客户端和服务器端的数据同步.问题很明显, ...

  9. 综合（奇技淫巧）：HDU 5118 GRE Words Once More!

    GRE Words Once More! Time Limit: 5000/5000 MS (Java/Others)    Memory Limit: 512000/512000 K (Java/O ...

  10. 1‘b0 什么意思

    在看datasheet 中有类似表达式如下: 3'b000, 1'b1, 1'b0; 3'b000这个表示:b代表二進制.3代表位元數. 1'b1:宣告為一位元二進制之值為1,一般除了可以宣告b外,也 ...