d3js / AngularJS-在angular指令中使用d3js

Question

我正在嘗試使用d3.js在有角度的應用程序內繪制一個簡單的條形圖。

為此，我首先將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 + "%"; });
         } 
      };
  });

然后，我通過使用promises包裝在指令中的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？

非常感謝

Answer 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 + "%"; });
           });
         } 
      };
  });