html页面散点图怎么做,再论HTML散点图(Scatter Plot)的SVG实现方式

介绍

在上一篇《HTML散点图(Scatter Plot)的三种不同实现方式性能比较》中，重点比较了散点图的SVG实现方式和HTML5 Canvas实现方式的不同。这儿再详细看看使用SVG，预先生成节点和实时加载数据之间的区别。

这儿为了在性能上有所比较，因此将散点数目增加到250,000，并且用于绘制散点的csv文件由data-generator.py统一生成。源代码可在此处下载。

data-generator.py

import pandas as pd

import numpy as np

df = pd.DataFrame(np.random.randint(0,500,size=(250000, 2)), columns=list('xy'))

df.to_csv('./data.csv',index=False)

实现方式

1. 预先用后端代码在HTML页面中生成250000个节点

pre-render-with-csv.js

var el = window.document.querySelector('#dataviz-container')

, body = window.document.querySelector('body')

, circleId = 'a2324' // say, this value was dynamically retrieved from some database

//load data from csv file

//d3.csv('data.csv', function(data){

fs.readFile('data.csv', 'utf8', function (err, data) {

data = d3.csvParse(data);

data.forEach(function(d){

d.x = +d.x;

d.y = +d.y;

});

console.log(data.length);

// generate the dataviz

var svg = d3.select(el)

.append('svg:svg')

.attr('width', 500)

.attr('height', 500);

svg.selectAll('.circle')

.data( data )

.enter()

.append('circle')

.attr('r', 1)

.attr('fill', '#26963c')

.attr('cx', function(d){return d.x;})

.attr('cy', function(d){return d.y;});

// save result in an html file, we could also keep it in memory, or export the interesting fragment into a database for later use

var svgsrc = window.document.documentElement.innerHTML;

fs.writeFile('index-svg-d3-csv-pre-render.html', svgsrc, function(err) {

if(err) {

console.log('error saving document', err);

} else {

console.log('The file was saved!');

}

});

});

2. 预先用后端代码在HTML页面中生成100000个节点。剩余的节点用d3.js代码在页面加载时实时生成

index-svg-d3-csv-partial-render.html

代码除了有预先存在的100000个节点之外，其他代码与index-svg-d3-csv.html相同。

3. 所有250000个节点用d3.js代码在页面加载时实时生成

index-svg-d3-csv.html

//load data from csv file

d3.csv('data.csv', function(data){

data.forEach(function(d){

d.x = +d.x;

d.y = +d.y;

});

// generate the dataviz

var svg = d3.select('#dataviz-container')

.append('svg:svg')

.attr('width', 500)

.attr('height', 500);

svg.selectAll('.circle')

.data( data )

.enter()

.append('circle')

.attr('r', 1)

.attr('fill', '#26963c')

.attr('cx', function(d){return d.x;})

.attr('cy', function(d){return d.y;});

});

结果比较

由于三种实现的最后呈现效果一样，主要就是看一下性能，即页面的加载时间，见图1。

如果从最终加载完毕的时间来看，第3种实现用时最短，第1种用时最长。与上一篇博客里的观察一致。由于服务器就在本地，因此加载csv文件的时间可以忽略不计。

如果从一开始出现散点来看，则是第1种用时最短，第3种用时最长。

从总体性能来看，如果将散点的数量增加到1,000,000，则加载用时将会达到40秒以上。显然，从用户体验来看，几十万的散点图性能将会超过个人所能忍受的程度。但如果能像第1种实现和第2种实现那样提前显示一部分散点，将会有效改善用户体验。

第2种实现和第1种相比，牺牲了一部分提前显示散点的时间，但降低了HTML页面的大小。

图1