HTML散点图(Scatter Plot)的三种不同实现方式性能比较

介绍

相对于其他图表类型而言，散点图往往会接收大数据做为输入，而需要同时显示上万甚至上百万的数据点在图上。对于基于HTML的散点图来说，其性能无疑是一个非常重要的考虑因素。

下面就对比一下3种不同的散点图实现，来看看其性能如何。实现的源码可在这儿下载。为了有可比性，这儿的散点图都是在一个500*500的区域内，绘制10,0000个半径为1的绿色点。其位置完全随机。

 

散点图实现 

1. 基于SVG的散点图实现

SVG被广泛用于 基于HTML的图表实现。而用SVG实现散点图也很简单。在HTML中建一个<svg>节点，再生成相应数量的<circle>节点就可以。

因为要生成的节点比较多，因此这儿借用了node.js，先在服务器端用d3+jsdom生成了HTML页面[1]，再在浏览器上直接加载。

pre-render.js

		var el = window.document.querySelector('#dataviz-container')
			, body = window.document.querySelector('body')
			, circleId = 'a2324'  // say, this value was dynamically retrieved from some database

		
		// set sample data
		data