I am trying to integrate d3.js with angularjs to create a line graph using data loaded from a tsv file. However, I am facing an issue where the graph is being rendered before the data is fully loaded. I want the graph to be rendered only after the data has been successfully loaded into the scope variable. Can you please assist me in resolving this issue? Below is the code snippet for the controller:
phonecatControllers.controller('MainCtrl', ['$scope',
function($scope) {
d3.tsv("sample.tsv", function(error, data) {
$scope.d3Data = data;
});
}]);
And here is the directive code:
directives.directive('d3Bar', [ function() {
return {
restrict : 'E',
scope : {
data : '='
},
link : function(scope, element) {
scope.$watch('data', function(newData, oldData) {
drawLine(newData);
}, true);
}
}
}
The HTML code is as follows:
<body ng-controller='MainCtrl'>
<d3-bar data='d3Data'></d3-bar>
</body>