使用angular / d3 / css3 /（？）通過動畫的樹狀圖創建體驗

Question

因此，我有一個簡單的樹圖，將其分為幾類，以后可能會更改。

嚴格來說，這僅適用於ipad / chrome，因此不必擔心遺留問題。

我希望分支（線）從每個類別（語音/視頻聊天）發展到以下節點（環聊，Skype等）。 我很確定畫布是實現此目的的最佳方法。 節點和類別的數據將從angularJS中的javascript / json工廠/模型中獲取。 堆棧中的任何人都可以為我提供一個解決方案，該解決方案可以擴展更改並簡化單擊和動畫以實現快速更改。

如果可能的話，在畫布領域（我幾乎一無所知）中添加更多評論。 這對我來說是先發制人的打擊； 所以，如果要，我太抱歉了。

Answer 1

D3可能是要走的路。 但是，它通常帶有陡峭的學習曲線（至少對我來說，以前沒有使用過SVG）。 Mike Bostock有一個類似的示例： http : //bl.ocks.org/mbostock/4339083

節點是交互式的，並具有多層嵌套。 它就像是一棵左右樹，而不是像您想要的那樣自上而下完成。 因此，將需要對其進行修改以使其達到您的要求。

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