Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

D3 svg & angular

1.568 visualizaciones

Publicado el

This talk covers how to integrate D3 with SVG & Angular to create awesome visualisations, leveraging the modularity of D3 and it's data binding, with angular data binding and the reusability of directives.
Source code for this talk:
https://github.com/adamkleingit/d3-svg-angular

Publicado en: Arte y fotografía
  • Sé el primero en comentar

D3 svg & angular

  1. 1. Adam Klein - 500Tech - Frontend Experts - Passionate developer & speaker - I used to have a jewfro CTO @ D3, SVG & ANGULAR
  2. 2. SVG BASICS
  3. 3. VISUALIZATIONS
  4. 4. Existing Solution?
  5. 5. Pure SVG & Angular
  6. 6. D3
  7. 7. D3 + Angular?
  8. 8. D3 PATH GENERATORS
  9. 9. Make an Arc - SVG <path stroke="black" fill="black" thickness="2" d="M13.753288904374106,9.992349288972044A17,17 0 0,1 -13.753288904374106,9.992349288972045L-12.135254915624 213,8.816778784387099A15,15 0 0,0 12.135254915624213,8.816778784387097Z"></path>
  10. 10. Make an Arc - D3 let arc = d3.svg.arc() .outerRadius(17) .innerRadius(15) .startAngle(0.7 * Math.PI) .endAngle(1.3 * Math.PI); d3.select("svg") .append("path") .attr("d", arc());
  11. 11. D3 Path Data Generators + Angular arc() { return d3.svg.arc() .outerRadius(17) .innerRadius(15) .startAngle(0.7 * Math.PI) .endAngle(1.3 * Math.PI)(); } <path d={{ $ctrl.arc() }}></path>
  12. 12. Custom Angular component <arc stroke="yellow" fill="yellow" thickness="2" radius="17" start-angle="0.7" end-angle=“1.3"> </arc>
  13. 13. ng-attr-* <path ng-attr-d={{ $ctrl.arc() }}></path>
  14. 14. custom component { templateNamespace: 'svg', replace: true }
  15. 15. Single root <g> <text>Hello</text> <text>World</text> </g>
  16. 16. D3 BEHAVIOURS
  17. 17. drag var drag = d3.behavior.drag() .on("drag", dragged); function dragged(d) { d3.select(this) .attr("cx", d.x = d3.event.x) .attr("cy", d.y = d3.event.y); } var dot = d3.select("g") .selectAll("circle") .data(dots) .enter().append("circle") .attr("r", 5) .attr("cx", function(d) { return d.x; }) .attr("cy", function(d) { return d.y; }) .call(drag);
  18. 18. drag Define behaviour var drag = d3.behavior.drag() .on("drag", dragged); function dragged(d) { d3.select(this) .attr("cx", d.x = d3.event.x) .attr("cy", d.y = d3.event.y); } var dot = d3.select("g") .selectAll("circle") .data(dots) .enter().append("circle") .attr("r", 5) .attr("cx", function(d) { return d.x; }) .attr("cy", function(d) { return d.y; }) .call(drag);
  19. 19. drag var drag = d3.behavior.drag() .on("drag", dragged); function dragged(d) { d3.select(this) .attr("cx", d.x = d3.event.x) .attr("cy", d.y = d3.event.y); } var dot = d3.select("g") .selectAll("circle") .data(dots) .enter().append("circle") .attr("r", 5) .attr("cx", function(d) { return d.x; }) .attr("cy", function(d) { return d.y; }) .call(drag); Create elements and bind to data
  20. 20. drag var drag = d3.behavior.drag() .on("drag", dragged); function dragged(d) { d3.select(this) .attr("cx", d.x = d3.event.x) .attr("cy", d.y = d3.event.y); } var dot = d3.select("g") .selectAll("circle") .data(dots) .enter().append("circle") .attr("r", 5) .attr("cx", function(d) { return d.x; }) .attr("cy", function(d) { return d.y; }) .call(drag); attach behaviour to element
  21. 21. drag Change DOM on drag var drag = d3.behavior.drag() .on("drag", dragged); function dragged(d) { d3.select(this) .attr("cx", d.x = d3.event.x) .attr("cy", d.y = d3.event.y); } var dot = d3.select("g") .selectAll("circle") .data(dots) .enter().append("circle") .attr("r", 5) .attr("cx", function(d) { return d.x; }) .attr("cy", function(d) { return d.y; }) .call(drag);
  22. 22. d3 drag + angular <circle ng-attr-cx="{{ item.x }}" ng-attr-cy="{{ item.y }}"> </circle>
  23. 23. const drag = d3.behavior.drag() .on(‘drag', () => { this.item.x += d3.event.dx; this.item.y += d3.event.dy; $scope.$digest(); }); d3.select($element[0]).call(drag); Define behaviour d3 drag + angular
  24. 24. const drag = d3.behavior.drag() .on(‘drag', () => { this.item.x += d3.event.dx; this.item.y += d3.event.dy; $scope.$digest(); }); d3.select($element[0]).call(drag); Change data on drag wrap with directive
  25. 25. wrap with directive const drag = d3.behavior.drag() .on(‘drag', () => { this.item.x += d3.event.dx; this.item.y += d3.event.dy; $scope.$digest(); }); d3.select($element[0]).call(drag); Attach behaviour to element
  26. 26. generic draggable directive <circle draggable="item" ng-attr-cx="{{ item.x }}" ng-attr-cy="{{ item.y }}"> </circle>
  27. 27. zoom-pan d3.behavior.zoom()
  28. 28. Performance const throttleDigest = _.throttle($scope.$digest.bind($scope), 17); const drag = d3.behavior.drag() .on(‘drag', () => { this.item.x += d3.event.dx; this.item.y += d3.event.dy; throttleDigest (); }); d3.select($element[0]).call(drag);
  29. 29. Performance Throttling Use one time binding when possible Change data & attributes directly - no digest Individual digests using events Fallback to using pure D3
  30. 30. LAYOUTS
  31. 31. Examples http://bl.ocks.org/mbostock/4062045 http://bl.ocks.org/mbostock/4063530 http://bl.ocks.org/mbostock/7607999 http://bl.ocks.org/mbostock/4339083
  32. 32. D3 force layout + Angular const force = d3.layout.force() .charge(-60) .gravity(0.02) .linkStrength(0.1) .linkDistance(260) .size([450,450]) .nodes(this.nodes) .links(this.links) .start(); force.on("tick", () => { $scope.$digest(); }); Define layout
  33. 33. const force = d3.layout.force() .charge(-60) .gravity(0.02) .linkStrength(0.1) .linkDistance(260) .size([450,450]) .nodes(this.nodes) .links(this.links) .start(); force.on("tick", () => { $scope.$digest(); }); Bind layout to data D3 force layout + Angular
  34. 34. Template using force layout <circle ng-repeat=“item in nodes" ng-attr-cx="{{ item.x }}" ng-attr-cy="{{ item.y }}"> </circle> Bind data to markup
  35. 35. SCALES
  36. 36. Scales Translate from values to pixels and back Create axis Linear, Logarithmic, Threshold, etc.
  37. 37. Axis Utility for creating the DOM elements of the Axis
  38. 38. SEPARATION OF CONCERNS
  39. 39. D3 use helpers to prepare data to DOM define behaviours and attach to elements define layouts and bind to data Angular bind data to DOM create directive to encapsulate components / behaviours / layouts
  40. 40. Read our blog: http://blog.500tech.com www.slideshare.net/500tech Adam Klein adam@500tech.com github.com/adamkleingit/d3-svg-angular

×