javascript - AngularJS 指令不更新 D3 圆包图表

Question

我一直在关注 walk through of how to hook up Angular and D3 together有了一个指令，我就得到了要显示的 D3 图。但是，当我更改表格中的数据时，图表不会更新。知道为什么会发生这种情况吗？

budgetApp.directive('d3Vis', function () {

 var r = 500,
 format = d3.format(",d"),
 fill = d3.scale.category20c();

 var bubble = d3.layout.pack()
 .sort(null)
 .size([r, r])
 .padding(1.5); 

 return {
  restrict: 'E', 
  scope: { 
  val: '='
 },
link: function (scope, element, attrs) {

  var vis = d3.select(element[0]).append("svg")
  .attr("width", r)
  .attr("height", r)
  .attr("class", "bubble");

  scope.$watch('val', function (newVal, oldVal) {

    // clear the elements inside of the directive
    vis.selectAll('*').remove();

    // if 'val' is undefined, exit
    if (!newVal) {
      return;
    }

    var node = vis.selectAll("g.node")
    .data(bubble.nodes(classes(newVal))
      .filter(function(d) {
        return !d.children;
      }))
    .enter().append("g")
    .attr("class", "node")
    .attr("transform", function(d) {
      return "translate(" + d.x + "," + d.y + ")";
    });

    node.append("title")
    .text(function(d) {
      return d.className + ": " + format(d.value);
    });

    node.append("circle")
    .attr("r", function(d) {
      return d.r;
    })
    .style("fill", function(d) {
      return fill(d.packageName);
    });

    node.append("text")
    .attr("text-anchor", "middle")
    .attr("dy", ".3em")
    .text(function(d) {
      return d.className.substring(0, d.r / 3);
    });  

    // Helper function, returns a flattened hierarchy containing all leaf nodes under the root.
    function classes(root) {
      var classes = [];

      function recurse(name, node) {
        if (node.children) node.children.forEach(function(child) {
          recurse(node.name, child);
        });
        else classes.push({
          packageName: name, 
          className: node.name, 
          value: node.size
        });
      }

      recurse(null, root);
      return {
        children: classes
      };
    }

    }); // end watch
  }
 };
});

Answer 1

由于您在隔离范围内使用“=”设置了到 val 的双向数据绑定(bind)，然后您 $watch()ing val，我假设表单数据正在正确传播到指令。

所以这可能是 D3 问题(在 $watch 函数内)，而不是 Angular 问题。 (我只熟悉 Angular，但 D3 看起来很有趣。)

不过，您的表单中确实有 ng-model='val'，对吗？