Javascript 以角度构建交互式d3力布局

我试图建立一个网站使用angular和d3，而不是特别擅长与他们任何一个。我希望有一个具有很多功能的强制布局，这样我可以选择节点，让它们用信息填充一个侧栏，然后在侧栏中有选项来更新该节点/查找其邻居/等等

我遇到的是一团混乱，我一直在尝试从angular应用程序的各个部分访问d3模块时遇到问题，反之亦然。我目前有一个指令内的d3代码，但这使得从边栏控制器调用变得困难。以前我在服务中使用过它，但这使得d3很难访问force layout controller范围。我想用它来调用scope.$apply

以下各部分需要协同工作：

d3在不同svg对象上使用事件侦听器 强制布局元素控制器 边栏控制器 数据服务

---

我应该把东西放在哪里我应该使用什么样的模块，我应该从哪里调用什么？因此，我可以随时使用d3.init函数添加数据，但d3在围绕MVC原则进行开发的摸索尝试中也发挥了很好的作用？

以下答案基于我开发Angular/d3应用程序的经验；您可以查看源代码的最新版本

在angular中生成D3指令的第一个原则是，控制器将加载数据并使用属性将数据放置在指令上。该指令声明可能类似于：

<force-layout-chart data="force.data"></force-layout-chart>

响应将来自您的数据服务…类似于$http的内容：

$http.get('/api/v2/foo/bar').then(function(response){
  $scope.force = {
    data: response
  };
})

然后在指令中使用scope.$watch侦听对force.data的更改：

响应对象将是force.data中的数据。在返回指令中，您需要在数据属性上启用双向数据绑定：

 return {
   restrict: 'E',
   scope: {data: '='},  //two-way binding
   link: link
 }

angular文档描述了数据绑定的各种方法以及您可能使用它们的原因，但您几乎肯定需要=here

由于要使用多个控制器来控制此指令，因此应使用require属性

scope.$watch('data',function(response){
  if (!response) return;

  //Update your D3 here
});

 return {
   restrict: 'E',
   scope: {data: '='},  //two-way binding
   link: link
 }

return {
  restrict: 'E',
  scope: {data: '='},
  require: ['SideBarCtrl','ForceCtrl'],
  link: link
};