Home > Developer > Web Develop
Since React is a interested in the V (view) of the MVC, it plays, and toolkits. This includes AngularJS and D3.
A app with React and D3.js:
/** @jsx react.dom*/varAPP =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 '); returnD.val * 5 + ' px '; }); }, Render:function () { return ( <div id= "Chart" ></div> ) }}); React.render (<app/>, document.getElementById (' Panel '));
<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <title>React + D3 + AngularJS</title> <Linkrel= "stylesheet"href= "Bower_components/bootstrap/dist/css/bootstrap.min.css" /> <Linkrel= "stylesheet"href= "Style.css"></Head><BodyID= "Panel"><Scriptsrc= "Bower_components/react/react.min.js"></Script><Scriptsrc= "Bower_components/react/jsxtransformer.js"></Script><Scriptsrc= "Bower_components/d3/d3.min.js"></Script><Scripttype= "TEXT/JSX"src= "Jsx/app.js"></Script></Body></HTML>
Integrating with Angular:
<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <title>React + D3 + AngularJS</title> <Linkrel= "stylesheet"href= "Bower_components/bootstrap/dist/css/bootstrap.min.css" /> <Linkrel= "stylesheet"href= "Style.css"></Head><BodyNg-app= "App"> <DivNg-controller= "Renderchartcontroller as Chartctrl"> <H1>Chart 1</H1> <RenderchartData= "Chartctrl.data"ID= "Rchart"></Renderchart> <H1>Chart 2</H1> <RenderchartData= "Chartctrl.data2"ID= "Rchart2"></Renderchart> </Div><Scriptsrc= "Https://cdnjs.cloudflare.com/ajax/libs/react/0.12.2/react.js"></Script><Scriptsrc= "Bower_components/d3/d3.min.js"></Script><Scriptsrc= "Bower_components/angular/angular.min.js"></Script><Scriptsrc= "Js/app.js"></Script><Scriptsrc= "Js/angular-app.js"></Script></Body></HTML>
/** * Created by Answer1215 on 9/2/2015.*//////////////////Controller//////////////functionRenderchartcontroller ($http) {varVM = 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//////////////functionRenderchart () {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*/varApp = 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) {returnD.val * 5 + ' px '; }); }, Render:function () { return(React.createelement ("Div", {ID: This. Props.target}) ) }});
[React] React fundamentals:integrating components with D3 and AngularJS
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
