Advertisement
Guest User

Untitled

a guest
May 28th, 2015
248
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 6.00 KB | None | 0 0
  1. angular.module( 'tva').directive( 'crD3Bars', [
  2. function () {
  3. return {
  4. restrict: 'E',
  5. scope: {
  6. data: '='
  7. },
  8. link: function (scope, element) {
  9. var margin = {top: 20, right: 20, bottom: 30, left: 40},
  10. width = 480 - margin.left - margin.right,
  11. height = 360 - margin.top - margin.bottom;
  12. var svg = d3.select(element[0])
  13. .append("svg")
  14. .attr('width', width + margin.left + margin.right)
  15. .attr('height', height + margin.top + margin.bottom)
  16. .text(function(d) { return d + "%"; })
  17. .append("g")
  18. .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
  19.  
  20. var x = d3.scale.ordinal().rangeRoundBands([0, width], .1);
  21. var y = d3.scale.linear().range([height, 0]);
  22.  
  23. var xAxis = d3.svg.axis()
  24. .scale(x)
  25. .orient("bottom");
  26.  
  27. var yAxis = d3.svg.axis()
  28. .scale(y)
  29. .orient("left")
  30. .ticks(10);
  31.  
  32. function getRandomColor() {
  33. var letters = '0123456789ABCDEF'.split('');
  34. var color = '#';
  35. for (var i = 0; i < 6; i++ ) {
  36. color += letters[Math.floor(Math.random() * 16)];
  37. }
  38. return color;
  39. }
  40. //Render graph based on 'data'
  41. scope.render = function(data) {
  42. //Set our scale's domains
  43. x.domain(data.map(function(d) { return d.name; }));
  44. y.domain([0, d3.max(data, function(d) { return d.count; })]);
  45.  
  46. //Redraw the axes
  47. svg.selectAll('g.axis').remove();
  48. //X axis
  49. svg.append("g")
  50. .attr("class", "x axis")
  51. .attr("transform", "translate(0," + height + ")")
  52. .call(xAxis);
  53.  
  54. //Y axis
  55. svg.append("g")
  56. .attr("class", "y axis")
  57. .call(yAxis)
  58. .append("text")
  59. .attr("transform", "rotate(-90)")
  60. .attr("y", 6)
  61. .attr("dy", ".71em")
  62. .style("text-anchor", "end")
  63. .text("Count");
  64.  
  65. var bars = svg.selectAll(".bar").data(data);
  66. bars.enter()
  67. .append("rect")
  68.  
  69. .attr("class", "bar")
  70. .attr("x", function(d) { return x(d.name); })
  71. .style("fill",getRandomColor())
  72. .attr("width", x.rangeBand());
  73.  
  74.  
  75. //Animate bars
  76. bars
  77. .transition()
  78. .duration(1000)
  79. .attr('height', function(d) { return height - y(d.count); })
  80. .attr("y", function(d) { return y(d.count); })
  81. .attr("fill", function(d) {
  82. return "rgb(0, 0, " + (d * 50) + ")";
  83. });
  84.  
  85. };
  86.  
  87. //Watch 'data' and run scope.render(newVal) whenever it changes
  88. //Use true for 'objectEquality' property so comparisons are done on equality and not reference
  89. scope.$watch('data', function(){
  90. scope.render(scope.data);
  91. }, true);
  92. }
  93. };
  94. }
  95. ]);
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement