har*_*der 3 javascript tsv d3.js angularjs
我想整合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>
使用ng-if你的条件是数据是否可用,来解决这个问题.
HTML:
<body ng-controller='MainCtrl'>
<div ng-if="d3Data">
<d3-bar data='d3Data'></d3-bar>
<div>
</body>
因此,只有在d3Data有任何数据时才会加载您的指令.
在手表中放置一个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);
}
}
}])
| 归档时间： |
|
| 查看次数： |
5476 次 |
| 最近记录： |