Question

我正在建立一个Angular Directive，其中包含一个服务和控制器，它显示了一个共同的，日常的公司层级链。我所拥有的代码与此堆栈溢出问题的接受答案完全相同：

我在Angular中创建了一个服务和控制器就是这个例子但是我不确定是否有更好的方法来实现这一点，因为所有的D3渲染都发生在＆＃39 ; SVG＆＃39;在Angular服务中。我所拥有的控制器和服务代码来自这个例子：

我想使用一个服务来处理大部分D3逻辑和一个控制器来绑定模板。

我的最终目标是使用上面的链接，使其看起来像这个谷歌图片页面上的选定图片，基本上是公司图表，但使用连接节点的直线：

我是D3新手，我的问题是：

我可以从上面的示例中获取弯曲链接，并使它们看起来像是Google图片链接中的图像。
任何熟悉Angular和D3的人都是CodePen链接中的示例，这是在服务中设置D3的最佳方式吗？或者有更好的方法来设置该服务。
我见过的大多数例子都有json与子关系显示（如第一个链接中的json，上面的堆栈溢出问题，但有没有办法通过userId连接节点。即如果我的json是＆＃39; flat＆＃39;看起来像这样：
```
 nodes = [{ userId: 1, name: "Bob" }, { userId: 2, name: "Bill" }, {userId: 3, name: "Jordan}]
 //connect the nodes with these type of edges
 edges = [{ from: 1, to: 2 }, { from: 1, to: 3}]
```
我可以在屏幕上拖动这些节点吗？
当你点击codePen链接中的示例时，我注意到文本后面的矩形会改变形状，文本会在矩形之外运行。看起来普通的CSS不会有所帮助，因为事情正在动态变化。无论节点的状态如何（即进入，转换或退出），是否有一种有效的方法使高度和宽度看起来相同

非常感谢你的帮助。