2012-09-17 124 views
0

我只想製作200個可點擊的節點(捕獲鼠標事件),它們通過線連接。 每個節點都有一些與它們相關的實時數據流形式的數據(爲了簡單起見,假定爲CSV),並且點擊節點顯示圖中繪製的值。簡單的任務(SVG與畫布)

  • 所有這些節點和線條所在的區域應該可以放大。

即使使用Google搜索了很多之後,我對這個SVG更適合或Canvas這樣簡單的東西感到困惑。 此外,什麼庫將是最好的目的。像Canvas一樣,我們使用KineticJS(使用HTML5),對於SVG我們使用d3和所有的。

專家,請提出建議。提前致謝。

回答

1

SVG對此更好。 畫布沒有鼠標事件,你可以使用拾取技術。

+0

感謝您的回覆。但是使用KinectJs,我很容易將鼠標事件關聯起來,這增加了混淆。 – Andy897

+0

他們是一個多少效果和激烈繪畫的問題。 SVG是「dom」,它很容易玩,但對於任何激烈的事情來說,它都遠不及畫布的表現。但SVG非常高效。我想要SVG,視網膜屏幕。 – 3on

1

這取決於。如果您有與每個節點相關的複雜視覺效果,如果您對節點進行一次柵格化,然後在畫布上進行克隆和繪製而不是使用SVG,則效果會更快。例如可以使用Paper.js來完成(它對鼠標事件有一定的支持)。如果你的節點很簡單,比如簡單的矩形或其他東西,你可以使用SVG。有些瀏覽器比SVG更有效。例如,IE9具有非常高效的SVG支持,因此如果您針對特定的瀏覽器,請首先查看它的SVG繪圖速度。
順便說一句,Paper.js是特別有用的,如果你想旋轉,縮放,移動對象和對象組等。它有一個很好的支持。

+0

不,不,我的節點只是簡單的方塊。在點擊這些方塊時,相應的繪圖開始出現在屏幕的左上角。這就對了。所以,基本上我只是爲了關聯鼠標事件。 (用這些節點左右點擊鼠標)+想要在空白區域滾動放大/縮小整個事物。 – Andy897

+0

好吧,有2個選項 - SVG使用類似d3的庫或Raphaël,或者可以使用Paper.js來實現與Canvas實現的功能幾乎相同的功能。爲SVG處理鼠標事件更容易,但您也可以在Paper.js中執行此操作。在簡單節點的情況下,兩個選項都是相似的。 – vladich

+0

非常感謝弗拉迪奇。我也打算在節點後面做一些輪廓..這個功能是否會優先支持SVG/Canvas?你有沒有使用過KineticJS ..對此有何看法? ..這可以使用Dojo完成嗎? ..很抱歉,在一個 – Andy897