适合与D3js组合的库,允许绘制到webgl(2D)

Question

这是我想要做的:http: //mbostock.github.com/d3/talk/20111116/iris-splom.html

但我想在webgl 2d中做到这一点(因为SVG性能非常慢,10k级SVG仅下降到12 fps)

在快速搜索中,我发现了几个webgl-2d库:cocos2d-html5,pixijs,Three.js和webgl-2d(废弃？)

它们似乎很简单,但我想做的是数据可视化.cocos和pixijs是2D游戏库.我是webgl和那些图书馆的新手,所以你们这些专家可以推荐吗？

我需要的东西总结:

互动:

• 图中的矩形选择.单击以选中某些元素.
• 变焦和平移支持(如果可能,闪烁变焦)

渲染器:WebGL2d(根据webgl的基准测试速度最快)

Answer 1

根据您的要求和总结，我会推荐最新版本的Cocos2D-html5，其中包括 WebGL 渲染支持。这就像在cocos2d.js设置文件中将渲染设置从 Canvas 更改为 WebGL 一样简单。例如，在 HelloHTML5World/cocos2d.js 中将 renderMode 更改为 2 以进行基于 WebGL 的渲染。

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

Cocos2d-html5 更准确地说是一个图形库，并且可能仅与（默认）chipmunk 或 box2d 游戏物理库结合使用才能被解释为完整的游戏库。

它支持矩形选择，或缩放和平移吗？是的，您可以扩展现有的库来实现这些行为。

Cocos2d-html5 平台的其他优势是增加了对使用 Cocosbuilder 进行可视化图形编辑的支持，以及对具有 Javascript 绑定的相同代码库的跨平台本机支持（iOS、Android 等）。

如果您有特定的平台问题，可以使用代码更详细地回答这些问题。

您可能需要查看JS 参考和cocos2d-html5 论坛以开始使用。

Update1：​​查看了 iris 数据集的数据可视化代码，这些图位于 svg 元素中，小圆圈根据 x,y 坐标绘制每个数据点。这些也可以在 Cocos2d 中通过 x,y 坐标、网格、具有不同不透明度的框和数据点的小圆圈来完成。通过 javascript 代码导入 json/xmll/csv 格式的 iris 数据集，并通过上述 cocos2d 方法进行绘图。通过 JavaScript 事件回调和鼠标处理方法进行矩形选择以及画布场景的相应更新。

Update2：再考虑一下，如果您发现 cocos2d 的学习曲线陡峭，您最好将自己限制在基于 WebGL 的仅图表库。该项目VivaGraphJS似乎适合基于 WebGL 的高性能。

另外，请最好以这种格式提出问题，您在代码中尝试了什么，预期输出是什么，您得到了什么。SO 并不是为了比较库。WebGL是一种渲染方法。例如在 Three.js 中的开关非常简单

renderer = new THREE.WebGLRenderer();

而不是画布：

renderer = new THREE.CanvasRenderer();

从而获得更高的性能。