d3.js
다른 프레임 워크와 함께 D3 사용
수색…
ReactJS가있는 D3.js 구성 요소
이 예제는 Nicolas Hery 의 블로그 게시물 을 기반으로합니다. ES6 클래스와 ReactJS의 라이프 사이클 메소드를 사용하여 D3 구성 요소를 업데이트 된 상태로 유지합니다.
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! React 구성 요소에서 렌더링되고 아래의 빨간색 직사각형이 사용자 지정 D3 구성 요소에서 렌더링됩니다.
React는 refs 를 사용하여 컴포넌트 인스턴스에 "접근"합니다. d3React 클래스의 라이프 사이클 메소드는이 ref를 사용하여 DOM 요소를 추가, 수정 및 제거해야합니다. d3React 클래스를 확장하여 더 많은 사용자 정의 구성 요소를 생성하고 div.d3Component 가 React에 의해 생성 된 모든 위치에 삽입 할 수 있습니다.
각을 가진 D3js
Angular와 함께 D3js를 사용하면 데이터가 업데이트되는 즉시 차트의 실시간 업데이트와 같은 새로운 가능성을 열 수 있습니다. Angular 지시어 안에 완전한 차트 기능을 캡슐화하여 쉽게 재사용 할 수 있습니다.
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);
});
마지막으로 지시어 정의. 차트를 만들고 조작하기 위해 작성한 코드는 지시문의 링크 함수에 있습니다.
지시어에 $ watch라는 스코프를 두어 컨트롤러가 새로운 데이터를 전달하자마자 업데이트하도록한다. 데이터가 변경된 경우 새 데이터를 데이터 변수에 다시 할당 한 다음 차트 다시 렌더링을 수행하는 repaintChart () 함수를 호출합니다.
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);
})
}
}
}
});
각도 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
}
Modified text is an extract of the original Stack Overflow Documentation
아래 라이선스 CC BY-SA 3.0
와 제휴하지 않음 Stack Overflow