介绍
相对于其他图表类型而言,散点图往往会接收大数据做为输入,而需要同时显示上万甚至上百万的数据点在图上。对于基于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