Weitere ähnliche Inhalte
Ähnlich wie AngularJSでデータビジュアライゼーションがしたい (20)
Mehr von Yosuke Onoue (9)
AngularJSでデータビジュアライゼーションがしたい
- 2. 自己紹介
• おのうえ ( @_likr )
• 可視化の研究とかやってる
• ng-kyotoとGDG Kobeでスタッフやってる
• D3.js、AngularJS、Reactとかやってる
- 5. 1 var data = [
2 {x: 20, y: 50, label: 'A'},
3 {x: 50, y: 20, label: 'B'},
4 {x: 80, y: 70, label: 'C'}
5 ];
6
7 var width = 500, height = 500;
8 var r = 5;
9 var xScale = d3.scale.linear()
10 .domain([0, 100])
11 .range([0, width]);
12 var yScale = d3.scale.linear()
13 .domain([0, 100])
14 .range([height, 0]);
15 var color = d3.scale.category10();
16 var translate = function (x, y) {
17 return 'translate(' + xScale(x) + ','
+ yScale(y) + ')';
18 };
19
20 var svg = d3.select('svg')
21 .attr({
22 width: width,
23 height: height
24 });
25
26 var points = svg.selectAll('g.point')
27 .data(data)
28 .enter()
29 .append('g')
30 .classed('point', true)
31 .attr({
32 transform: function (d) {
33 return translate(d.x, d.y);
34 },
35 fill: function (d) {
36 return color(d.label);
37 }
38 });
39
40 points.append('circle')
41 .attr('r', r);
42
43 points.append('text')
44 .text(function (d) {
45 return d.label;
46 })
47 .attr({
48 x: r,
49 y: r
50 });
https://jsfiddle.net/mfw6e2z6/
D3.jsで実装
- 6. 結果
1 <svg height="500" width="500">
2 <g fill="#1f77b4" transform="translate(100,250)" class="point">
3 <circle r="5"></circle>
4 <text y="5" x="5">A</text>
5 </g>
6 <g fill="#ff7f0e" transform="translate(250,400)" class="point">
7 <circle r="5"></circle>
8 <text y="5" x="5">B</text>
9 </g>
10 <g fill="#2ca02c" transform="translate(400,150.00000000000003)" class="point">
11 <circle r="5"></circle>
12 <text y="5" x="5">C</text>
13 </g>
14 </svg>
- 7. 1 <div ng-app="app">
2 <div ng-controller="ChartController">
3 <svg ng-attr-width="{{width}}" ng-attr-height="{{height}}">
4 <g
5 class="point"
6 ng-attr-transform="{{translate(item.x, item.y)}}"
7 ng-attr-fill="{{color(item.label)}}"
8 ng-repeat="item in data">
9 <circle ng-attr-r="{{r}}"></circle>
10 <text ng-attr-x="{{r}}" ng-attr-y="{{r}}">{{item.label}}</text>
11 </g>
12 </svg>
13 </div>
14 </div>
AngularJSのテンプレートに置き換えてみる
- 8. 1 angular.module('app', []).controller('ChartController', function ($scope) {
2 $scope.data = [
3 {x: 20, y: 50, label: 'A'},
4 {x: 50, y: 20, label: 'B'},
5 {x: 80, y: 70, label: 'C'}
6 ];
7
8 $scope.width = 500;
9 $scope.height = 500;
10 $scope.r = 5;
11
12 var xScale = d3.scale.linear()
13 .domain([0, 100])
14 .range([0, $scope.width]);
15 var yScale = d3.scale.linear()
16 .domain([0, 100])
17 .range([$scope.height, 0]);
18 $scope.translate = function (x, y) {
19 return 'translate(' + xScale(x) + ',' + yScale(y) + ')';
20 };
21 $scope.color = d3.scale.category10();
22 });
AngularJSで実装
https://jsfiddle.net/tgzpsq8f/
- 14. CSS Transition
• CSSのtransition-propertyを使用
• SVG属性ではなくてStyleで指定する
• transform, fill, stroke, stroke-widthなどが対応
• delay、durationを指定可能
1 g.point {
2 transition-property: transform;
3 transition-duration: 1s;
4 transition-delay: 1s;
5 }
- 15. 6 <svg ng-attr-width="{{width}}" ng-attr-height="{{height}}">
7 <g
8 class="point"
9 ng-style="pointStyle(item)"
10 ng-attr-fill="{{color(item.label)}}"
11 ng-repeat="item in data">
12 <circle ng-attr-r="{{r}}"></circle>
13 <text ng-attr-x="{{r}}" ng-attr-y="{{r}}">{{item.label}}</text>
14 </g>
15 </svg>
https://jsfiddle.net/sk69x3mb/
19 var translate = function (x, y) {
20 return 'translate(' + xScale(x) + 'px,' + yScale(y) + 'px)';
21 };
22 $scope.pointStyle = function (item) {
23 return {
24 transform: translate(item.x, item[$scope.yKey])
25 };
26 };
ng-styleに変更
translateの単位が必要(px)
- 18. 1 <circle cy="250" cx="250">
2 <animate
3 attributeName="cx"
4 dur="0.5s"
5 fill="freeze"
6 from="250"
7 to="300"
8 begin="0"
9 end="0.5"/>
10 <animate
11 attributeName="cy"
12 dur="0.5s"
13 fill="freeze"
14 from="250"
15 to="300"
16 begin="0"
17 end="0.5"/>
18 </circle>
- 20. 使い方
1 <!-- Normal SVG -->
2 <circle r="5" cx="50" cy="50"/>
3
4 <!-- SVG with data binding -->
5 <circle ss-r="ctrl.r" ss-cx="ctrl.cx" ss-cy="ctrl.cy"/>
6
7 <!-- SVG with data binding and animation -->
8 <circle ss-r="ctrl.r" ss-cx="ctrl.cx" ss-cy="ctrl.cy" ss-dur="0.3" ss-delay="0.2"/>
1 var angular = require('angular'),
2 shinsekai = require('shinsekai');
3
4 angular.module('example', [shinsekai]);
- 21. SMIL
• 利点
• 多くのSVG属性に対応可能
• 欠点
• Transition目的では実装が手間
• Chromeで将来的に廃止予定
http://blog.chromium.org/2015/07/chrome-45-beta-new-es2015-features.html
