使用 angular/d3/css3/(?) 通过动画树状图创建体验

Question

所以我有一个简单的树形图，它被分解成以后可能会改变的类别。

这仅限于 ipad/chrome，所以不用担心遗留问题。

我希望分支（线路）从每个类别（语音/视频聊天）增长到以下节点（环聊、Skype 等）。我很确定画布是实现这一点的最佳方式。节点和类别的数据将从 angularJS 中的 javascript/json 工厂/模型中获取。堆栈中的任何人都可以帮助我提供一种解决方案，该解决方案可以针对更改进行扩展，并使点击和动画简单化以实现快速更改。

如果可能的话，在画布领域（我几乎一无所知）中增加额外的 cmets。 这对我来说是先发制人；所以如果，我要求太多对不起了。

Answer 1

D3 可能是要走的路。不过，它通常伴随着陡峭的学习曲线（至少对我来说，之前没有使用过 SVG）。 Mike Bostock 有一个类似的例子：http://bl.ocks.org/mbostock/4339083

节点是交互式的并且有多层嵌套。它是作为左右树完成的，而不是像你想要的那样自上而下。所以它需要修改才能得到你想要的。

Mike Bostock 的另一个例子是：http://bl.ocks.org/mbostock/999346。这是自上而下的。