角度上的D3:更改数据对象不刷新图表

Question

我有一个更改数据的按钮

$scope.changeData = function(){
    $scope.myData = [10, 80, Math.floor((Math.random()*30)+1)];
}

以及使用此数据的指令.

<bars-chart chart-data="myData"></bars-chart>

我认为应该有一些双向绑定,如果我转储该值,它确实会显示在视图上,但它不会再次调用链接函数.

我在这里做错了吗？ http://codepen.io/anon/pen/QwWqpa

Answer 1

因为d3不是有角度的,所以你需要设置一个观察者才能使它工作.在观察者中嵌入链接函数中的所有逻辑,如下所示:

link: function (scope, element, attrs) {
  scope.$watch(function(){
    // all logic here
  });
}

现在唯一的问题是,这将继续追加新的图表,而不是替换当前的图表,但这可能是因为你使用chart.append("div").我认为在d3中有一个不同的功能你应该用来替换而不是追加.

或者,您可以将创建逻辑放在观察者之外,并编写额外的代码以在观察者中更新图表.