d3.js 分页加载

2022-08-30 22:31:29 阅读：167 来源： 互联网

标签：attr js dms let xScale data d3 加载

　　当数据量过大时，使用d3.js渲染各种图时，如果一下子加载出来，会出现加载过慢，这样使用效果就不是太好，为了解决这个问题，使用了分页加载数据并渐进渲染各种图。

一、数据格式

数据如下：这里是一个example.csv文件，

x,y,value
0,1,0.2
0,2,0.7
0,3,0.01
.......
100000, 20, 1

二、读取数据和拆分数据

// 定义拆分数据函数
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;

　　　　let myXValue = [...new Set(data.map(d=>{return d.x;}))]; let myYValue = [...new Set(data.map(d=>{return d.y;}))];

　　　// 初始化,代码在第三步骤
　　　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,加载
来源： https://www.cnblogs.com/gjw0818/p/16640904.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

d3.js 分页加载