畫布或SVG（或混合）適用於大型組織結構圖

主要問題非常簡單...我製作了一個相當大的組織結構圖（或族譜），我想知道是否應該使用SVG或Canvas 。畫布或SVG（或混合）適用於大型組織結構圖

一些要求可能會搖擺的選擇：

我最初傾向於SVG，但是我聽說在繪製大量項目時會出現性能問題。另外，看起來Canvas在舊版瀏覽器中有更好的支持。

我假設你的意思是你有多達5萬個節點要顯示來自*的數據*，而不是一次？由於您需要緩衝視圖，因此您可以查看http://leafletjs.com並查看它是否可以幫助您（原則上，組織圖是地圖）。 – K3N

我需要顯示樹的形狀，儘管我不必一次拉下有關每個節點的所有數據。當有人在看50k節點時，它會開始非常小。 –

使用SVG處理'onclick'事件要容易得多，因爲每個對象都有一個與之關聯的實際DOM元素。 –

謝謝大家的意見。以下是我在探討一些建議後提出的。

SVG：由於其向量化特性及其與DOM的集成，此路由非常誘人。令人遺憾的是，渲染+ 100k節點的性能導致這條路線死亡。

帆布：表現明智這似乎是一個勝利者。不過，在這一點上，我將需要探索如何爲每個渲染節點添加onClick/onHover功能。

小冊子：這也是贏家。它需要處理諸如地圖導航，性能和移動設備等許多問題。雖然它不是解決如何繪製組織結構圖的解決方案。不過，最棒的是你可以爲它提供圖像瓷磚或畫布。這給了我們一些選擇。

因此，最終很有可能我會先使用圖像標題，然後遷移到畫布......同時關注SVG中的性能提升。

2013-10-16 16:00:21

回答