Question

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

这是模型：

 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}];
});

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

Answer 1

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

结果是范围可以传递一个可选的objectEquality参数（http://docs.angularjs.org/api/ng.$rootScope.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/

更新

我还设法使用鼠标生成数据的双向绑定来更新数据点。关键是跟踪鼠标位置，然后使用反函数更新项目的位置，然后调用范围。$ 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/

集成angularjs和d3，简单的数据绑定示例

更新

1 个答案:

更新