将Angular与D3库集成

Question

我正在尝试制作用于将d3与angularjs集成的演示应用程序，我已经实现了在ng-newsletter上定义的方式

项目结构是：

项目结构

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

关于我所研究的同一问题的其他解决方案是

问题是屏幕上没有显示，是什么原因？

请解释解决方案代码，因为我是angularjs的新手，如果你想要任何其他代码，请询问

我到底错过了什么，如果你看到我在index.html评论了d3Service.js的代码，包括它一个人无法访问DemoController并且没有显示{{title}} 。

Answer 1

如果您没有获得所需的输出，请检查浏览器是否有任何错误。 我执行了你的代码并让它按预期工作。 你可以查看这个小提琴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}}按原样显示，则脚本可能无法正确加载。

如有任何其他问题，请回去。

Answer 2

也许问题是你已经评论了脚本服务行。

取消注释。

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

您还可以通过在html上手动添加d3 js库来让Angularjs和D3协同工作。

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