d3js/AngularJS - 在角度指令中使用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 + "%"; }); 
     } 
     }; 
    }); 

我再通過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 + "%"; }); 
      }); 
     } 
     }; 
    });