Angular D3 directive playground

by Adambasszer

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<div ng-app="myApp">
    <div ng-controller="myController">
        <list-display data="arrayOne"></list-display>
        <list-display data="arrayTwo"></list-display>
    </div>
</div>

JavaScript

angular.module("myApp", []);
angular.module("myApp").directive('listDisplay', function ($parse) {
    return {
        restrict: 'E',
        scope: {
            data: "="
        },
        link: function postLink(scope, iElement, iAttrs) {
            var svg = d3.select(iElement[0]).append('svg');
            var colors = ["red", "blue", "pink", "black", "green"];
            scope.data.forEach(function (el) {
                svg.append("circle")
                    .attr("cx", el)
                    .attr("cy", el)
                    .attr("fill", colors[Math.floor(Math.random() * colors.length)])
                    .attr("r", 3);
            });
        }
    };
});
angular.module("myApp").controller("myController", ["$scope", function ($scope) {
    //console.log($scope);
    $scope.arrayOne = [50,60];
    $scope.arrayTwo = [10,20,30,40];
}]);