d3.js
अन्य चौखटे के साथ डी 3 का उपयोग करना
खोज…
ReactJS के साथ D3.js घटक
यह उदाहरण निकोलस हेरी की एक ब्लॉग पोस्ट पर आधारित है। यह D3 घटक को अपडेट रखने के लिए ES6 वर्गों और ReactJS के जीवनचक्र के तरीकों का उपयोग करता है
d3_react.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello, d3React!</title>
<style>
.d3Component {
width: 720px;
height: 120px;
}
</style>
</head>
<script src="https://fb.me/react-15.2.1.min.js"></script>
<script src="https://fb.me/react-dom-15.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
<script src="https://d3js.org/d3.v4.min.js"></script>
<body>
<div id="app" />
<script type="text/babel" src="d3_react.js"></script>
</body>
</html>
d3_react.js
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
d3React: new d3React()
};
this.getd3ReactState = this.getd3ReactState.bind(this);
}
getd3ReactState() {
// Using props and state, calculate the d3React state
return ({
data: {
x: 0,
y: 0,
width: 42,
height: 17,
fill: 'red'
}
});
}
componentDidMount() {
var props = {
width: this._d3Div.clientWidth,
height: this._d3Div.clientHeight
};
var state = this.getd3ReactState();
this.state.d3React.create(this._d3Div, props, state);
}
componentDidUpdate(prevProps, prevState) {
var state = this.getd3ReactState();
this.state.d3React.update(this._d3Div, state);
}
componentWillUnmount() {
this.state.d3React.destroy(this._d3Div);
}
render() {
return (
<div>
<h1>{this.props.message}</h1>
<div className="d3Component" ref={(component) => { this._d3Div = component; } } />
</div>
);
}
}
class d3React {
constructor() {
this.create = this.create.bind(this);
this.update = this.update.bind(this);
this.destroy = this.destroy.bind(this);
this._drawComponent = this._drawComponent.bind(this);
}
create(element, props, state) {
console.log('d3React create');
var svg = d3.select(element).append('svg')
.attr('width', props.width)
.attr('height', props.height);
this.update(element, state);
}
update(element, state) {
console.log('d3React update');
this._drawComponent(element, state.data);
}
destroy(element) {
console.log('d3React destroy');
}
_drawComponent(element, data) {
// perform all drawing on the element here
var svg = d3.select(element).select('svg');
svg.append('rect')
.attr('x', data.x)
.attr('y', data.y)
.attr('width', data.width)
.attr('height', data.height)
.attr('fill', data.fill);
}
}
ReactDOM.render(<App message="Hello, D3.js and React!"/>, document.getElementById('app'));
d3_react.html और d3_react.js की सामग्री को एक ही निर्देशिका में रखें और एक वेब ब्राउज़र को d3React.html फ़ाइल में नेविगेट करें। यदि सब ठीक हो जाता है, तो आपको Hello, D3.js and React! बताते हुए हेडर दिखाई देगा Hello, D3.js and React! रिएक्ट घटक से प्रदान किया गया है और कस्टम डी 3 घटक से नीचे एक लाल आयत है।
का उपयोग करता है प्रतिक्रिया refs घटक उदाहरण के लिए "बाहर तक पहुँचने के लिए"। d3React वर्ग की जीवनचक्र विधियों को DOM तत्वों को जोड़ने, संशोधित करने और हटाने के लिए इस रेफरी की आवश्यकता होती है। d3React वर्ग को अधिक कस्टम घटक बनाने के लिए विस्तारित किया जा सकता है और कहीं भी डाला जाता है। div.d3Component को React द्वारा बनाया जाता है।
कोणीय के साथ डी 3जे
एंगुलर के साथ डी 3जे का उपयोग करने से डेटा अपडेट होते ही चार्ट के लाइव अपडेशन जैसी संभावनाओं के नए मोर्चे खुल सकते हैं। हम एक कोणीय निर्देश के भीतर पूर्ण चार्ट कार्यक्षमता को एनकैप्सुलेट कर सकते हैं, जो इसे आसानी से पुन: प्रयोज्य बनाता है।
index.html >>
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script data-require="[email protected]" data-semver="1.4.1" src="https://code.angularjs.org/1.4.1/angular.js"></script>
<script src="app.js"></script>
<script src="bar-chart.js"></script>
</head>
<body>
<div ng-controller="MyCtrl">
<!-- reusable d3js bar-chart directive, data is sent using isolated scope -->
<bar-chart data="data"></bar-chart>
</div>
</body>
</html>
हम नियंत्रक का उपयोग करके चार्ट में डेटा को पास कर सकते हैं, और निर्देश में चार्ट के लाइव अपडेशन को सक्षम करने के लिए डेटा में किसी भी बदलाव के लिए देख सकते हैं:
app.js >>
angular.module('myApp', [])
.controller('MyCtrl', function($scope) {
$scope.data = [50, 40, 30];
$scope.$watch('data', function(newVal, oldVal) {
$scope.data = newVal;
}, true);
});
अंत में, निर्देशक की परिभाषा। चार्ट बनाने और हेरफेर करने के लिए हम जो कोड लिखते हैं, वह निर्देश के लिंक फ़ंक्शन में बैठेगा।
ध्यान दें कि हमने एक गुंजाइश रखी है। निर्देश में $ घड़ी भी, जैसे ही नियंत्रक नया डेटा पास करता है, अपडेट करने के लिए। यदि कोई डेटा परिवर्तन है और फिर repaintChart () फ़ंक्शन को कॉल करने पर हम अपने डेटा वैरिएबल पर नए डेटा को फिर से असाइन कर रहे हैं, जो चार्ट को फिर से प्रस्तुत करता है।
बार-चार्ट। js >>
angular.module('myApp').directive('barChart', function($window) {
return {
restrict: 'E',
replace: true,
scope: {
data: '='
},
template: '<div id="bar-chart"></div>',
link: function(scope, element, attrs, fn) {
var data = scope.data;
var d3 = $window.d3;
var rawSvg = element;
var colors = d3.scale.category10();
var canvas = d3.select(rawSvg[0])
.append('svg')
.attr("width", 300)
.attr("height", 150);
// watching for any changes in the data
// if new data is detected, the chart repaint code is run
scope.$watch('data', function(newVal, oldVal) {
data = newVal;
repaintChart();
}, true);
var xscale = d3.scale.linear()
.domain([0, 100])
.range([0, 240]);
var yscale = d3.scale.linear()
.domain([0, data.length])
.range([0, 120]);
var bar = canvas.append('g')
.attr("id", "bar-group")
.attr("transform", "translate(10,20)")
.selectAll('rect')
.data(data)
.enter()
.append('rect')
.attr("class", "bar")
.attr("height", 15)
.attr("x", 0)
.attr("y", function(d, i) {
return yscale(i);
})
.style("fill", function(d, i) {
return colors(i);
})
.attr("width", function(d) {
return xscale(d);
});
// changing the bar widths according to the changes in data
function repaintChart() {
canvas.selectAll('rect')
.data(data)
.transition()
.duration(800)
.attr("width", function(d) {
return xscale(d);
})
}
}
}
});
कोणीय v1 के साथ D3.js चार्ट
HTML:
<div ng-app="myApp" ng-controller="Controller">
<some-chart data="data"></some-chart>
</div>
जावास्क्रिप्ट:
angular.module('myApp', [])
.directive('someChart', function() {
return {
restrict: 'E',
scope: {data: '=data'},
link: function (scope, element, attrs) {
var chartElement = d3.select(element[0]);
// here you have scope.data and chartElement
// so you may do what you want
}
};
});
function Controller($scope) {
$scope.data = [1,2,3,4,5]; // useful data
}