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

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

以下是一个例子-

这就是模型：

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

该示例应该做的是，当输入框中的数字更改时，能够更新圆圈位置和输入旁边的文本。现在，除了指令的初始加载之外，没有任何东西可以工作

更新

我把我的范围改为

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

---

文本正在更新，但指令上的手表仍然没有更新。

我在谷歌论坛上找到了一些帮助-

结果表明，可以向作用域传递一个可选的objectEquality参数(http://docs.angularjs.org/api/ng.$rootScope.Scope）

现在手表的功能就可以工作了

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

小提琴在这里：

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

小提琴在这里：

你可能想看看

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