Integrating Angular with D3 library
Question
I am trying to make demo app for integrating d3 with angularjs , I have implemented the way defined on ng-newsletter
Project structure is:
main app.js is
'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
'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
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
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.
2 answers
solution1
2 2014-03-03 03:59:35
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/ .
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.
In case of any other issues, do get back.
solution2
0 2014-02-20 17:39:30
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.
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.
This article by Brian Ford describes integrating AngluarJS with D3 in detail http://briantford.com/blog/angular-d3.html
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.