适合与D3js结合的库，允许绘制webgl (2D)

Suitable library for combining with D3js , to allowing drawing to webgl (2D)

本文关键字：2D 许绘制 绘制 webgl D3js 结合      更新时间：2023-09-26

这是我想做的: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和那些库的新手，所以so的专家，你们能推荐一下吗?

我需要的东西的总结:

交互:

  • 图内的矩形选择。
  • 缩放和平移支持(如果可能的话，闪族缩放)

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

根据您的要求和总结，我推荐最新版本的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更准确地说是一个图形库和&也许只有结合(默认)花栗鼠或box2d游戏物理库才能被理解为完整的游戏库。

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

Cocos2d-html5平台的另一个优势是增加了Cocosbuilder对视觉图形编辑的支持，以及对Javascript绑定的相同代码库的跨平台原生支持(iOS, Android等)。

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

你可能想看看JS参考和cocos2d-html5论坛开始。

Update1:查看虹膜数据集的数据可视化代码，图被封装在svg元素中，根据x,y坐标用小圆圈绘制每个数据点。这些也可以在Cocos2d中通过x,y坐标，网格，具有不同不透明度的框和数据点的小圆圈来完成。通过javascript代码导入json/xml/csv格式的虹膜数据集，并通过上面的cocos2d方法绘制。通过javascript事件回调选择矩形&Mousehandler方法和相应的画布场景更新。

Update2:再考虑一下，如果你发现cocos2d的学习曲线很陡峭，你可能最好限制自己只使用基于WebGL的图表库。这个项目VivaGraphJS似乎适合基于WebGL的高性能。

另外，请最好以这种格式提问，你在代码中尝试了什么，预期的输出是什么，你得到了什么。SO不是用来比较库的。WebGL是一个渲染方法。例如，在three.js中，这个开关就像

一样简单
renderer = new THREE.WebGLRenderer();

而不是canvas:

renderer = new THREE.CanvasRenderer();

导致更高的性能

相关文章：