将Angular与D3库集成

Question

I am trying to make demo app for integrating d3 with angularjs , I have implemented the way defined on ng-newsletter 我正在尝试制作用于将d3与angularjs集成的演示应用程序，我已经实现了在ng-newsletter上定义的方式

Project structure is: 项目结构是：

项目结构

main app.js is 主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 is 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");
    };
}]);

The other solutions regarding the same issue where i have looked into are 关于我所研究的同一问题的其他解决方案是

alexandros.resin.io alexandros.resin.io
phloxblog phloxblog
cmaurer.github cmaurer.github
odiseo.net odiseo.net

The problem is nothing gets display on screen, what is the reason? 问题是屏幕上没有显示，是什么原因？

Please explain the solution code as i am new to angularjs, if you want any other piece of code, please ask 请解释解决方案代码，因为我是angularjs的新手，如果你想要任何其他代码，请询问

What exactly am i missing, also if you see the code i have commented the d3Service.js in index.html as including it one is not able to access the DemoController and no {{title}} is displayed. 我到底错过了什么，如果你看到我在index.html评论了d3Service.js的代码，包括它一个人无法访问DemoController并且没有显示{{title}} 。

Answer 1

If you are not getting the desired output, please check the browser for any errors. 如果您没有获得所需的输出，请检查浏览器是否有任何错误。 I executed your code and got it working as expected. 我执行了你的代码并让它按预期工作。 You could check this fiddle http://jsfiddle.net/59vMY/ . 你可以查看这个小提琴http://jsfiddle.net/59vMY/ 。

I created a sample directive 我创建了一个示例指令

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);
          })         
      }
    };
  }]);

If {{title}} is getting displayed as is, then there is a chance that the scripts are not getting loaded properly. 如果{{title}}按原样显示，则脚本可能无法正确加载。

In case of any other issues, do get back. 如有任何其他问题，请回去。

Answer 2

Maybe the problem is that you have commented the script service line. 也许问题是你已经评论了脚本服务行。

Uncomment it. 取消注释。

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

Then you should get your directive working as is explained in ng-newsletter. 然后你应该按照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
        });
      }}
  }]);

You can also have Angularjs and D3 working together by adding d3 js library manually on your html. 您还可以通过在html上手动添加d3 js库来让Angularjs和D3协同工作。

This article by Brian Ford describes integrating AngluarJS with D3 in detail http://briantford.com/blog/angular-d3.html Brian Ford的这篇文章描述了AngluarJS与D3的详细整合http://briantford.com/blog/angular-d3.html

将Angular与D3库集成

问题描述

2 个解决方案

解决方案1
2 2014-03-03 03:59:35

解决方案2
0 2014-02-20 17:39:30

将Angular与D3库集成

问题描述

2 个解决方案

解决方案1 2 2014-03-03 03:59:35

解决方案2 0 2014-02-20 17:39:30

解决方案1
2 2014-03-03 03:59:35

解决方案2
0 2014-02-20 17:39:30