d3 Directive

HTML

<script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>

<div ng-app="test">
    <div ng-controller="TheCtrl as ctrl">
        <wrapper-directive data="ctrl.d1" ></wrapper-directive>
        <wrapper-directive data="ctrl.d2" ></wrapper-directive>
    </div>
</div>

CSS

div.bar {
				display: inline-block;
				width: 20px;
				height: 75px;
				margin-right: 2px;
				background-color: teal;
			}

JavaScript

angular.module("test", []);
    
    angular.module("test").controller("TheCtrl", function ($scope) {
    		var that = this;
        
        that.d1 = [11, 12, 15, 67, 18, 17, 44, 55, 23, 25 ];
        that.d2 = [11, 12, 15, 23, 18, 17, 16, 18, 23, 25 ];
    });
    
    angular.module("test").directive("wrapperDirective", function() {
    		var svg, x;
        
        var init = function(element, scope)
        {
        	svg = d3.select(element[0]).append("svg")
    				.attr("width", 500)
    				.attr("height", 100);
            
          svg.selectAll("rect")
             .data(scope.data)
             .enter()
             .append("rect")
              .attr("x", function(d, i) {
                  return i * 21;  //Bar width of 20 plus 1 for padding
              })
             .attr("y", function(d) {
                  return 100 - d;  //Height minus data value
              })
             .attr("width", 20)
             .attr("height", function(d) {
                  return d;  //Just the data value
              })
              .attr("fill", "teal");
        }
        
        var render = function(scope)
        {
            svg.selectAll("rect")
                .data(scope.data)
                .transition()
                .duration(500)
                .attr("x", function(d, i) {
                  return i * 21;  //Bar width of 20 plus 1 for padding
              })
             .attr("y", function(d) {
                  return 100 - d;  //Height minus data value
              })
             .attr("width", 20)
             .attr("height", function(d) {
                  return d;  //Just the data value
              });
            
        }
    
        return {
            restrict : "E",
            transclude: true,
            scope : {
                "data" : "="
            },
            template : "<div><button ng-click='func()'>Sort</button></div>",
            link: function (scope, element, attrs)
            {
           ...