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

【问题标题】：Integrating angularjs and d3, simple data-binding example集成angularjs和d3，简单的数据绑定示例
【发布时间】：2012-10-22 23:17:16
【问题描述】：

我在编写一个使用 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}];
});

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

【问题讨论】：

你可能想阅读groups.google.com/forum/?fromgroups=#!topic/angular/VD77QR1J6uQ

标签： javascript d3.js angularjs

【解决方案1】：

我设法在谷歌论坛上找到了一些帮助 - 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/

更新

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

【讨论】：