当数据量过大时,使用d3.js渲染各种图时,如果一下子加载出来,会出现加载过慢,这样使用效果就不是太好,为了解决这个问题,使用了分页加载数据并渐进渲染各种图。
一、数据格式
数据如下:这里是一个example.csv文件,
x,y,value 0,1,0.2 0,2,0.7
0,3,0.01
.......
100000, 20, 1
二、读取数据和拆分数据
// 定义拆分数据函数let myXValue = [...new Set(data.map(d=>{return d.x;}))]; let myYValue = [...new Set(data.map(d=>{return d.y;}))];
let splitData = [];
function getSplitData(data, num=10000) {
let newArray = [];
for (let index = 0; index < data.length; index+=num) {
newArray.push(data.slice(index, index+num));
}
return newArray;
}
// 读取数据
d3.csv('example.csv').then(async function(data){
let heatmapBox, rectGU,xScale, yScale, colorScale;
// 初始化,代码在第三步骤
renderInit(data);
splitData = getSplitData(data);
// draw data
for (let c=0; c<splitData.length; c++) {
// 分页加载的函数放在了第四步
await renderUpdate(splitData[c]);
}
});
三、draw canvas和create scale
// 一个简单的初始化例子 function renderInit(data) { const dms = { width: 1000, height: 600, margin: { top: 50, right: 50, bottom: 50, left: 50 } }; dms.innerWidth = dms.width - dms.margin.left - dms.margin.right; dms.innerHeight = dms.height - dms.margin.top - dms.margin.bottom;
// draw canvas const mainsvg = d3.select(id) .append('svg') .attr('width', dms.width) .attr('height', dms.height) .attr('id', 'mainsvg') .style('background', '#f8f9fd'); const maingroup = mainsvg.append('g') .attr('transform', `translate(${dms.margin.left}, ${dms.margin.top})`); heatmapBox = maingroup.append('g');
// create scale
xScale = d3.scaleBand()
.domain(myXValue)
.range([0, dms.innerWidth])
.padding(0.01)
yScale = d3.scaleBand()
.domain(myYValue)
.range([dms.innerWidth, 0])
.padding(0.01)
颜色尺度的设置参考上一节,此处省略
}
四、分页加载
// 循环加载 const renderUpdate = async function (data) { let transition = d3.transition().duration(1000).ease(d3.easeLinear); rectGU = heatmapBox.append('g').selectAll('rect').data(data); // heatmapBox.append('g').selectAll('rect').data(data) // .join('rect') // .attr('fill', d=>colorScale(d.value)) // .style('opacity', 1) // .transition(transition) // .attr('x', d=>xScale(d.x)) // .attr('y', d=>yScale(d.y)) // .attr('rx', 0) // .attr('ry', 0) // .attr('width', xScale.bandwidth()) // .attr('height', yScale.bandwidth()); let rectEnters = rectGU.enter().append('rect') .attr('x', d=>xScale(d.x)) .attr('y', d=>yScale(d.y)) .attr('rx', 0) .attr('ry', 0) .attr('width', xScale.bandwidth()) .attr('height', yScale.bandwidth()) .attr('fill', d=>colorScale(d.value)) .style('opacity', 1); rectGU.merge(rectEnters).transition(transition) .attr('x', d=>xScale(d.x)) .attr('y', d=>yScale(d.y));
await transition.end(); };
到这里,分页渲染数据完成。
标签:attr,js,dms,let,xScale,data,d3,加载 From: https://www.cnblogs.com/gjw0818/p/16640904.html