與D3js相結合，以使繪圖的WebGL（2D）

Question

這裏適合圖書館就是我想要做的事： http://mbostock.github.com/d3/talk/20111116/iris-splom.html

但我想要做的是，在WebGL的2D（因爲SVG性能非常慢， randering 10K SVG只已經下降到12 fps）的

上快速搜索我發現了幾個WebGL的-2D庫：cocos2d-html5，pixijs，three.js所和WebGL-2D（放棄）

他們似乎是相當？容易，但我想要做的是數據visualization.cocos和pixijs是2D遊戲庫。我對webgl和那些庫很陌生，所以你們可以推薦SO專家嗎？

的東西總結，我需要：

互動：內地塊

• 矩形選區。點擊選擇某些元素。
• 縮放和平移支持（猶太人變焦時，如果可能的話）

渲染： WebGL2d（按基準WebGL是最快）

Answer 1

根據您的要求和總結，我會建議的Cocos2D-html5最新版本其中包括WebGL渲染支持。這與在cocos2d.js設置文件中將渲染設置從畫布更改爲WebGL一樣簡單。例如，在HelloHTML5World/cocos2d.js中，將基於WebGL渲染的renderMode更改爲2。

renderMode:0,  //Choose of RenderMode: 0(default), 1(Canvas only), 2(WebGL only) 

的Cocos2D-HTML5是更精確的圖形庫和&只有在組合可能解釋爲一個完整的遊戲庫（默認）花栗鼠或Box2D的遊戲物理庫。

它支持矩形選區，或縮放和平移？是的，你可以擴展現有的庫來實現這些行爲。

Cocos2d-html5平臺的其他優勢是增加了對使用Cocosbuilder進行可視化圖形編輯的支持以及跨平臺原生支持（iOS，Android等）與Javascript綁定相同的代碼庫的支持。

如果您有特定平臺的問題，這些都可以在代碼更好的細節來回答。

你可能想看看JS reference和cocos2d-html5 forum的入門。

UPDATE1：在虹膜數據集的數據可視化代碼看去，圖容納在SVG元素，與小圓圈根據x，y座標繪製每個數據點。這些也可以在Cocos2d中通過x，y座標，網格，具有不同不透明度的框和數據點的小圓圈完成。通過JavaScript代碼以json/xmll/csv格式導入您的虹膜數據集，並通過上面的cocos2d方法進行繪圖。通過javascript事件回調的矩形選擇& mousehandler方法和相應的畫布場景更新。

UPDATE2：關於第二個想法，如果你找到了cocos2d陡峭的學習曲線，你可以更好地限制自己這是基於WebGL的一個圖表只能庫。這個項目VivaGraphJS似乎適合於基於WebGL的high performance。

另外，請優先以這種格式提問，您在代碼中嘗試了什麼，預期的輸出是什麼，您取而代之的是什麼。 SO不是用來比較圖書館的。 WebGL是一種渲染方法。在three.js所的開關，例如很簡單，只要

renderer = new THREE.WebGLRenderer(); 

代替畫布之一：

renderer = new THREE.CanvasRenderer(); 

導致更高的性能。