Javascript AngularJS指令不更新D3圆形包装图

我一直在遵循指令，我已经得到了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
  }
 };
});

---

由于使用“=”在隔离作用域中将双向数据绑定设置为

val

，然后使用$watch（）绑定

val

，因此我假设表单数据已正确传播到指令

因此，这可能是D3问题（在$watch函数中），而不是角度问题。（我只熟悉Angular，但D3看起来很有趣。）

---

您的表单中确实有

ng model='val'

，对吗？

您好，我将粘贴我正在使用的那种“模板”。考虑数据的观察者。您需要比较这些值，这是在将true设置为参数时完成的

  angular.module('myDirectives', [])
  .directive('test', ['$window',
        function ($window) {
            return {
                restrict: 'E',
                scope: {
                    data: '=',
                  /* other attributes */
                },
                replace: false,
                template: '<div id="mydirective"></div>',
                link: function (scope, element, attrs) {
                    var svg = d3.select(element[0])
                        .append('svg')
                        .style('width', '100%')                     
                    var margin = parseInt(attrs.margin) || 20;

                    // Browser onresize event
                    $window.onresize = function () {
                        scope.$apply();
                    };
                   // New data
                    scope.$watch('data', function (newVals, oldVals) {
                        return scope.render(newVals);
                    }, true);


                    scope.$watch(function () {
                        return angular.element($window)[0].innerWidth;
                    }, function () {
                        scope.render(scope.data);
                    }); 

                     scope.render = function (data) {
                        // custom d3 code
                        svg.selectAll('*').remove();
                        if (!data) return;
                       var width = d3.select(element[0]).node().offsetWidth - margin,

                    }
                }
            };
        }
    ])

angular.module（'myDirectives'，[]）
.directive（'test'，['$window'，
功能（$window）{
返回{
限制：'E'，
范围：{
数据：'='，
/*其他属性*/
},
替换：false，
模板：“”，
链接：函数（范围、元素、属性）{
var svg=d3.select（元素[0]）
.append（'svg'）
.style（“宽度”、“100%”）
var margin=parseInt（属性裕度）| 20；
//浏览器调整大小事件
$window.onresize=函数（）{
作用域：$apply（）；
};
//新数据
范围.$watch（'data'，函数（newVals，oldVals）{
返回scope.render（newVals）；
}，对）；
范围：$watch（函数（）{
返回angular.element（$window）[0].innerWidth；
}，函数（）{
scope.render（scope.data）；
}); 
scope.render=函数（数据）{
//自定义d3代码
selectAll（'*'）.remove（）；
如果（！数据）返回；
var width=d3.select（元素[0]）.node（）.offsetWidth-margin，
}
}
};
}
])

如果您使用console.log记录数据，数据是否已更新？我不熟悉d3，但如果是这种情况，请看一下apply方法：您能提供一个不工作的

示例吗？