4

我在编写一个使用 angularjs 更新 d3 圆位置的简单指令时遇到问题。

这是示例 - http://jsfiddle.net/hKxmJ/3/

这是模型：

 app.controller('AppCtrl', function ($scope) {
   $scope.d = [5, 10, 70, 6, 40, 45, 80, 30, 25];
 });

该示例应该做的是当输入框中的数字发生变化时，能够同时更新圆圈位置和输入旁边的文本。现在，除了指令的初始加载之外，没有任何作用。

更新

http://jsfiddle.net/hKxmJ/5/

我已将范围更改为

app.controller('AppCtrl', function ($scope) {
  $scope.d = [{v: 5}, {v: 10}, {v: 70}, {v: 6}, {v: 40}, {v: 45}, {v: 80}, {v: 30}, {v: 25}];
});

并且文本正在更新，但指令上的手表仍未更新。

4

1 回答 1

4

我设法在谷歌论坛上找到了一些帮助 - https://groups.google.com/forum/?fromgroups=#!topic/angular/NblckkSF6EM

事实证明，范围可以传递一个可选的 objectEquality 参数（http://docs.angularjs.org/api/ng.$ro​​otScope.Scope）

objectEquality (optional) – {boolean=} – Compare object for equality rather than for reference.

现在手表功能将起作用。

 scope.$watch(attr.ghBind, function(value){
    vis.selectAll("circle").data(value)
       .attr("cy", function(d){return d.v;});
    }
 , true);

小提琴在这里：http: //jsfiddle.net/hKxmJ/6/

更新

我还设法使用鼠标生成数据的双向绑定来更新数据点。关键是跟踪鼠标位置，然后使用反函数更新项目的位置，然后调用scope.$apply()。此处突出显示：

      .on('drag', function(d, i) {
        var sel = d3.select('.drag'),
          cy = sel.attr('cy');
        sel.attr('cy', parseInt(cy)+d3.event.dy); // Update mouse postion
        d.v = height-Math.round(cy);              // Calculate value using an inverse function
        scope.$apply();                           // Call scope.$apply()
        console.log(d,i,cy);
      })

小提琴在这里：http: //jsfiddle.net/hKxmJ/7/

于 2012-11-02T22:07:01.350 回答