AngularJS 与 D3.js 的集成答案

【问题标题】：AngularJS integration with D3.jsAngularJS 与 D3.js 的集成
【发布时间】：2015-11-17 17:29:06
【问题描述】：

有人能描述一个简单的集成 AngularJS 和 D3.js 的策略吗？这两个库的工作方式似乎如此不同。 D3 想要将所有数据绑定到 DOM 元素，而 Angular 想要将其保存在 ViewModel（“控制器”）中。

我很难考虑如何在 D3 中编写交互式 UI，同时仍将内容保留在 AngularJS 中。

任何帮助将不胜感激。

【问题讨论】：

【解决方案1】：

几乎所有事情都使用 Angular 指令。控制器的使用应该最少。在您的 d3 代码中，仅与指令在其链接函数中提供的 element 交互。例如

.directive('myDirective', function() {
  return {
    link: function(scope, element, attrs) {
      d3.select(element[0]).append('svg');
    }
  };
});

【讨论】：

你是说所有的 D3.js 代码都会放在链接函数中吗？那么，如果您需要在单击此元素时对其他元素执行某些操作，会发生什么情况？
是的。您将使用 Angular 功能与需要更改其状态的其他指令进行通信。我通常使用服务来管理指令之间的通信。在您的指令中导入服务，并让他们在其链接函数中向服务注册回调。