Geek asks and answers

Angular-js integration with the D3 library

I'm trying to make a demo application for integrating d3 with angularjs , I implemented a method defined on ng-newsletter

Project Structure:

project structure

main app.js

'use strict';

//the app name is angularD3
angular.module('angularD3',['angularD3.controllers','angularD3.directives']);

//setup dependency injection
angular.module('d3Service',[]);// this is the service method for getting d3 library
angular.module('angularD3.controllers', []);
angular.module('angularD3.directives', ['d3Service']); //passing the d3 service to d3 directive

index.html

<!doctype html>
<html ng-app="angularD3">
    <head>
        <meta charset="utf-8">
        <title>d3 and Angular</title>
        <meta name="description" content="d3 and Angular">

        <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<!--          <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js"></script> -->
         <script type="text/javascript" src="scripts/angular.js"></script>
        <script src="scripts/app.js"></script>
<!--        <script src="scripts/services/d3.js"></script> -->
        <script src="scripts/controllers/d3Controller.js"></script>

    </head>
    <body >
        <div ng-controller="DemoCtrl">
            {{title}}
            <button ng-click="d3OnClick();" name="click button">click button</button>

            <d3-bars data="data" ng-model="data[1].score" label="title"></d3-bars>

        </div>      
    </body>
</html>

Controller.js

'use strict';

angular.module('angularD3.controllers').controller('DemoCtrl', ['$scope', function($scope){
    $scope.title = "DemoCtrl";
    $scope.data = [
                     {name: "Greg", score:98},
                     {name: "Ari", score:96},
                     {name: "Loser", score: 48}
                     ];
    $scope.d3OnClick = function(){
        alert("item.name");
    };
}]);

Other solutions regarding the same problem I was looking at

The problem is that nothing is displayed on the screen, what is the reason?

Please explain the solution code as I am new to angularjs, if you want any other code please ask

What I am missing is also, if you see the code, I commented d3Service.jsin index.html, since it cannot access DemoControllerand is not displayed {{title}}.

+3
2

, , . , . http://jsfiddle.net/59vMY/.

angular.module('angularD3.directives')
  .directive('d3Bars', [function() {
    return {
        restrict: 'EA',
        replace: true,
      scope: {
          data: "="
      },
      link: function(scope, ele, attrs) {
          var svg = d3.select(ele[0])
            .append('svg')
            .style('width', '100%');
          angular.forEach(scope.data, function (item, index) {
              svg.append('rect')
        .attr('height', 20)
        .attr('width', item.score)
        .attr('x', 0)
        .attr('y', 20*index)
        .attr('fill', item.color);
          })         
      }
    };
  }]);

{{title}} , , .

- , .

+2

, , script.

.

<script src="scripts/services/d3.js"></script>

, ng-newsletter.

angular.module('myApp.directives', ['d3'])
  .directive('barChart', ['d3Service', function(d3Service) {
    return {
      link: function(scope, element, attrs) {
        d3Service.d3().then(function(d3) {
          // d3 is the raw d3 object
        });
      }}
  }]);

Angularjs D3, d3 js html.

AngluarJS D3 http://briantford.com/blog/angular-d3.html

0

More articles:


All Articles