整合角的js與D3庫

我想使演示應用程序與angularjs整合d3，我已經實現了對ng-newsletter 整合角的js與D3庫

項目結構中定義的方法是：

project structure

主要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，如果你想要的任何其他部分的代碼，請問

究竟是什麼，我缺少的，如果你還看到代碼我評論過的d3Service.js在index.html因爲包括它不能訪問DemoController並且不顯示{{title}}。

來源

2014-02-18 Akhil Jain

也許問題是你已經評論了腳本服務線。

取消註釋。

<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一起工作。

本文由布賴恩·福特描述了與D3詳細 http://briantford.com/blog/angular-d3.html

來源

2014-02-20 17:39:30 almoraleslopez

已經見過布萊恩福德，也沒有成功 –

整合AngluarJS如果你沒有得到期望的輸出，請檢查是否存在錯誤的瀏覽器。我執行你的代碼，並按預期工作。你可以檢查這個小提琴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}}的是越來越顯示爲是，那麼是該腳本沒有得到正確加載的機會。

如有任何其他問題，請回去。

來源

2014-03-03 03:59:35 swathis

整合角的js與D3庫

回答

相關問題