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