[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})
)
}
});
[React] React Fundamentals: Integrating Components with D3 and AngularJS的更多相关文章
- [React] react+redux+router+webpack+antd环境搭建一版
好久之前搭建的一个react执行环境,受历史影响是webpack3.10.0和webpack-dev-server2.7.1的环境,新项目准备用webpack4重新弄弄了,旧的记录就合并发布了(在没有 ...
- React/React Native 的ES5 ES6写法对照表
//es6与es5的区别很多React/React Native的初学者都被ES6的问题迷惑:各路大神都建议我们直接学习ES6的语法(class Foo extends React.Component ...
- React/React Native 的ES5 ES6写法对照表－b
很多React/React Native的初学者都被ES6的问题迷惑:各路大神都建议我们直接学习ES6的语法(class Foo extends React.Component),然而网上搜到的很多教 ...
- React: React组件的生命周期
一.简介 在前面的第二篇博文中对组件的生命周期虽然做了一个大略介绍,但总感觉说的过于简单,毕竟生命周期是React组件的核心部分.在我们熟练使用React挂载和合成组件来创建应用表现层的过程中,针对数 ...
- React: React的属性验证机制
一.简介 在开发中,属性变量类型的验证,几乎是任何语言都必须关注的问题,因为如果传入的数据类型不对,轻者程序运行仅仅是给出警告⚠️,严重的会直接导致程序中断,APP闪退或者web页面挂掉,这是很严重的 ...
- React/react相关小结
React React组件由React元素组成,React组件使用React.Component或React.PureComponent来生成:React元素使用JSX的语法来编写或使用React.c ...
- [React Fundamentals] Composable Components
To make more composable React components, you can define common APIs for similar component types. im ...
- [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 ...
- [React] React Fundamentals: Mixins
Mixins will allow you to apply behaviors to multiple React components. Components are the best way t ...
随机推荐
- JavaScript学习心得（四）
条件语句 任何事物非真即假. 在JavaScript中,条件判断以下情况为假: false NaN 0 空串 null undefined 在使用相等运算符时,建议将数字写在相等运算符的左边.全等比较 ...
- 请大神帮忙解决 jquery 控制 li 标签问题
<li class="active"><a href="#1" data-toggle="tab">日志详细情况&l ...
- 数据库基本概念-oracle介绍
甲骨文公司,全称甲骨文股份有限公司是全球最大的企业软件公司,总部位于美国加利福尼亚州的红木滩.甲骨文是继Microsoft及IBM后,全球收入第三多的软件公司.甲骨文公司1989年正式进入中国市场.重 ...
- python中os模块的常用接口和异常中Exception的运用
1.os.path.join(arg1, arg2) 将arg1和arg2对应的字符串连接起来并返回连接后的字符串,如果arg1.arg2为变量,就先将arg1.arg2转换为字符串后再进行连接. 2 ...
- Linux脚本
放置在/usr/local/sbin下面: 收到一个问题:"-bash XXX 没有权限":需要在此目录下执行chmod +x filename 收到一个问题:"-bas ...
- Sublime text 3 快键方式汇总 及 主题应用
Sublime Text 3 快捷键汇总 Sublime Text 3是款非常实用代码编辑神器,但是想要用任何一款软件,掌握一些快捷键还是很有必要的. 选择类 Ctrl+D 选中光标所占的文本,继续操 ...
- ios7控件特性（一）
苹果发布iOS7之后,iOS7全部采用扁平化的界面,我们的app界面在iOS7上出现了很大的改变,这包括UINavigationBar,UIButton,UIActionSheet,UITabBar等 ...
- OneAlert 入门（一）——事件流
OneAlert 入门(一)--事件流 OneAlert 是国内首个 SaaS 模式的云告警平台,集成国内外主流监控/支撑系统,实现一个平台上集中处理所有 IT 事件,提升 IT 可靠性.它能以史上第 ...
- QQ 群也能接收告警啦！团队沟通力 Up Up！
截止到昨天,你已经可以通过 OneAlert 的「排班」和「分派」功能,来对告警进行有序地分发,解决团队协作效率低的问题了.然而 OneAlert 觉得自己还可以更进一步,把团队沟通困难的问题也解决掉 ...
- 【POJ1743】不可重叠最长重复子串
题意:求一个字符串里两个不重叠的最长重复子串 代码如下: #include<cstdio> #include<cstdlib> #include<cstring> ...