我正在尝试使用 d3.js 在 Angular 应用程序中绘制一个简单的条形图。
为此,我首先将 d3 包装在指令中:
angular.module('myApp', []).directive(barChart', function($parse) {
return {
restrict: 'E',
replace: false,
scope: {data: '=chartData'},
link: function (scope, element, attrs) {
var chart = d3.select(element[0]);
chart.append("div").attr("class", "chart")
.selectAll('div')
.data(scope.data).enter().append("div")
.transition().ease("elastic")
.style("width", function(d) { return d + "%"; })
.text(function(d) { return d + "%"; });
}
};
});
然后,我通过使用 Promise 封装在指令中的 API 调用来获取数据。我使用的语法如下:
function myCtrl ($scope) {
$scope.myData = [];
myPromise.
.then(function(data) {
$scope.myData = _.values(data);
console.log($scope.myData);
});
}
数据加载得很好,因为它在控制台中正确打印。但是,图表并未更新。我的 d3 代码很好,因为以下代码也有效:
function myCtrl ($scope) {
$scope.myData = [34.5, 34.25, 34.5, 36.152, 40.33];;
}
我做错了什么?我应该强制执行新的摘要周期还是使用 $scope.$apply?
非常感谢
最佳答案
我认为 d3 不会监视您的数据变化。尝试将您的指令代码包装在观察程序中以更新您的图表。
angular.module('myApp', []).directive(barChart', function($parse) {
return {
restrict: 'E',
replace: false,
scope: {data: '=chartData'},
link: function (scope, element, attrs) {
var chart = d3.select(element[0]);
chart.append("div");
scope.$watch("data", function(d){
chart.find("div:first").attr("class", "chart")
.selectAll('div')
.data(d).enter().append("div")
.transition().ease("elastic")
.style("width", function(d) { return d + "%"; })
.text(function(d) { return d + "%"; });
});
}
};
});
关于javascript - d3js/AngularJS - 在 Angular Directive(指令)中使用 d3js,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25607455/