SVG Performance with Angular

Transcript

1. SVG Performance with Angular @Quramy 2016.04.20 #ng_sake
2. About me • Yosuke KURAMI (@Quramy) • Frontend Web Developer at WACUL INC. • ೔ʑͷ࢓ࣄ͸AngularJS(1.x)ͰSPA։ൃ • झຯͰTypeScript༻ͷVimϓϥΪϯ։ൃͯ͠·͢ • http://vimawesome.com/plugin/tsuquyomi 

3. Angular2͸ຊ౰ʹ଎͍ͷ͔ʁ
4. ࢼͯ͠Έͨ
5. ͓୊: D3.js • Force Layout in D3.js
 (http://bl.ocks.org/mbostock/4062045) • Node, Linkͷؔ܎ΛݩʹॏྗܭࢉΛߦͬͯNode ͷ഑ஔΛܾఆ͢ΔΞϧΰϦζϜ • D3.layout͸୞ͷؔ਺ͳͷͰɺComponentʹbind ͢Ε͹D3.jsҎ֎ͷFrameworkʹ΋૊ΈࠐΊΔ
6. Force Layout const size = 600; const force = d3.layout.force() .nodes(this.UserLink.nodes()) .links(this.UserLink.links()) .size([size, size]) .gravity(1.1) .friction(0.98) .charge(-30) .linkDistance(size / 18.0) .alpha(.9) ; const nodes = <UserNode[]>force.nodes(); // nodeͷ࠲ඪ৘ใͷऔಘ const links = <Link[]>force.links(); // linkͷ࠲ඪ৘ใͷऔಘ force.on('tick', () => { // ߋ৽ຖͷϋϯυϥΛ͜͜ʹॻ͘ }); force.start();
7. With AngularJS 1.5 <svg> <g ng-if="ctrl.nodes.length && ctrl.links.length"> <line ng-repeat="link in ctrl.links" ng-attr-x1="{{link.source.x}}" ng-attr-y1="{{link.source.y}}" ng-attr-x2="{{link.target.x}}" ng-attr-y2="{{link.target.y}}" ></line> <circle ng-repeat="node in ctrl.nodes" r="5" title="node.id" ng-attr-cx="{{node.x}}" ng-attr-cy="{{node.y}}" ng-attr-fill="{{ctrl.hsl(node)}}" ng-click="ctrl.onClick(node)" ng-class="{selected: node.id===ctrl.selectedNode.id}" ></circle> </g> </svg> force.on('tick', () => { this.$scope.$digest(); // ࣗ෼ͰDigestϧʔϓճ͢ඞཁ͋Γ });
8. With Angular 2 <svg> <g *ngIf="nodes?.length && links?.length"> <line *ngFor="#link of links" [attr.x1]="link.source.x" [attr.y1]="link.source.y" [attr.x2]="link.target.x" [attr.y2]="link.target.y" ></line> <circle *ngFor="#node of nodes" r="5" [attr.title]="node?.id" [attr.cx]="node.x" [attr.cy]="node.y" [attr.fill]="hsl(node)" (click)="onClick(node)" [class.selected]="node?.id===selectedNode?.id" ></circle> </g> </svg> force.on('tick', () => { // উखʹzone.js͕ಈ͘ͷͰԿ΋͢Δඞཁͳ͠ });
9. Demonstration http://quramy.github.io/ng-svg-perf/ng1/ http://quramy.github.io/ng-svg-perf/ng2/
10. Results
    7PMVNF
    $POEJUJPO "OHVMBS+4
     "OHVMBS
     CFUB d
    /PEFT
    d
    -JOLT 
    '14 
    '14 d
    /PEFT
    d
    -JOLT 
    '14 
    '14 d
    /PEFT
    d 
    -JOLT 
    '14 
    '14 d 
    /PEFT
    d 
    -JOLT 
    '14 
    '14
11. Angular2͸ຊ౰ʹ଎͔ͬͨ(͜ͳΈ)
12. ࢀߟ • Angular2Ͱ΋ͱΓ͋͑ͣSVGΛඳ͍ͯΈΔ
 (http://qiita.com/_likr/items/b2cbaa0e5e3e21a92e57) • D3.js on AngularJSͷ࣮૷ύλʔϯൺֱ
 (http://qiita.com/Quramy/items/4ed72ae91899b47fb167) • Replacing (most of) d3.js with pure SVG + AngularJS
 (http://alexandros.resin.io/angular-d3-svg/)