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

川长思鸟来 2022-10-06 04:47 13阅读 0赞

介绍

在上一篇《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页面的大小。

![0818b9ca8b590ca3270a3433284dd417.png][]

图1

[0818b9ca8b590ca3270a3433284dd417.png]: /images/20221005/3f2de5863d7e4d308f3af7fa85000ef0.png

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

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关六、Matplotlib——Scatter散点图、Bar 柱状图（条形图）

相关 Python | 散点图

相关 19、20_散点图、连接散点图、气泡图、不同颜色的散点图、直方图

相关 java 散点图_JFreeChart ：快速散点图演示

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

相关 matplotlib基础（1）之散点图scatter

相关画散点图

相关【python】Matplotlib画图（一）——散点图scatter

相关 scatter diagram散点图和线性关系

相关 Matplotlib学习---用matplotlib画散点图，气泡图（scatter plot, bubble chart）