d3js/AngularJS - 在角度指令中使用 d3js答案

【问题标题】：d3js/AngularJS - use d3js in angular directivesd3js/AngularJS - 在角度指令中使用 d3js
【发布时间】：2014-09-01 13:58:03
【问题描述】：

我正在尝试使用 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？

非常感谢

【问题讨论】：

标签： javascript angularjs d3.js

【解决方案1】：

我认为 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 + "%"; });
           });
         } 
      };
  });

【讨论】：