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

Question

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

这将严格适用于 ipad/chrome，所以不用担心遗留问题。

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

如果可能的话，在 Canvas 领域(我几乎一无所知)添加额外的评论。这对我来说是先发制人；所以如果，我要求太多抱歉。

Answer 1

D3 可能是可行的方法。虽然它通常伴随着陡峭的学习曲线(至少对我而言，之前没有使用过 SVG)。Mike Bostock 有一个类似的例子:http://bl.ocks.org/mbostock/4339083

节点是交互的，有多层嵌套。它是作为左右树完成的，而不是像您想要的那样自上而下。因此，需要对其进行修改才能达到您想要的效果。

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