d3.js
D3 gebruiken met andere frameworks
Zoeken…
D3.js component met ReactJS
Dit voorbeeld is gebaseerd op een blogbericht van Nicolas Hery . Het maakt gebruik van ES6-klassen en ReactJS's levenscyclusmethoden om de D3-component bijgewerkt te houden
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'));
Plaats de inhoud van d3_react.html en d3_react.js in dezelfde map en navigeer in een webbrowser naar het bestand d3React.html. Als alles goed gaat, ziet u een kop met de tekst Hello, D3.js and React! weergegeven uit de component React en een rode rechthoek hieronder uit de aangepaste component D3.
React gebruikt refs om de componentinstantie te "bereiken". De levenscyclusmethoden van de klasse d3React vereisen deze ref om DOM-elementen toe te voegen, te wijzigen en te verwijderen. De klasse d3React kan worden uitgebreid om meer aangepaste componenten te maken en overal worden ingevoegd waar een div.d3Component wordt gemaakt door React.
D3js met hoekig
Het gebruik van D3js met Angular kan nieuwe mogelijkheden openen, zoals live updates van grafieken zodra de gegevens zijn bijgewerkt. We kunnen volledige grafiekfunctionaliteit inkapselen binnen een Angular-richtlijn, waardoor deze gemakkelijk herbruikbaar is.
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>
We kunnen de gegevens doorgeven aan de kaart met behulp van de controller en kijken naar eventuele wijzigingen in de gegevens om de kaart live bij te werken in de richtlijn:
app.js >>
angular.module('myApp', [])
.controller('MyCtrl', function($scope) {
$scope.data = [50, 40, 30];
$scope.$watch('data', function(newVal, oldVal) {
$scope.data = newVal;
}, true);
});
Ten slotte de definitie van de richtlijn. De code die we schrijven om de grafiek te maken en te manipuleren, bevindt zich in de koppelingsfunctie van de richtlijn.
Merk op dat we een scope. $ Watch ook in de richtlijn hebben geplaatst, om bij te werken zodra de controller nieuwe gegevens doorgeeft. We wijzen nieuwe gegevens opnieuw toe aan onze gegevensvariabele als er een gegevenswijziging is en roepen vervolgens de functie repaintChart () aan, die de grafiek opnieuw uitvoert.
bar-chart.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);
})
}
}
}
});
D3.js-kaart met Angular v1
HTML:
<div ng-app="myApp" ng-controller="Controller">
<some-chart data="data"></some-chart>
</div>
javascript:
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
}