javascript – 如何在角度js中从tsv加载数据后呈现指令
作者:互联网
我想整合d3.js和angularjs.我必须绘制一个玲图.数据从tsv文件加载.
我在渲染图时遇到问题,错误是数据尚未加载并且图形呈现.我希望当数据加载到范围变量中时,应该不显示图形.请帮忙.
这是控制器的代码
phonecatControllers.controller('MainCtrl', ['$scope',
function($scope) {
d3.tsv("sample.tsv", function(error, data) {
$scope.d3Data = data;
});
}]);
这是指令代码
directives.directive('d3Bar', [ function() {
return {
restrict : 'E',
scope : {
data : '='
},
link : function(scope, element) {
scope.$watch('data', function(newData, oldData) {
drawLine(newData);
}, true);
}
}
}
和HTML是
<body ng-controller='MainCtrl'>
<d3-bar data='d3Data'></d3-bar>
</body>
解决方法:
在手表中放置一个if控件,检查您的数据项是否准备就绪
directives.directive('d3Bar', [function() {
return {
restrict : 'E',
scope : {
data : '='
},
link : function(scope, element) {
scope.$watch('data', function(newData, oldData) {
if(newData){
drawLine(newData);
}
}, true);
}
}
}])
标签:javascript,angularjs,d3-js,tsv 来源: https://codeday.me/bug/20190713/1449644.html