D3 and color grid
Question
I have a huge text file, which name is "tempanomaly_new.txt", and i have 1670 nombers of 2D arrays with size of 180*90. i read the text file and save the values in myMatrix. after that i tried to create a grid for one of my arrays,180*90, and i want read the value from myMatrix and save in gridData array for coloring my grid with these values. But i have big problem, because when i execute my code, it takes too much time and not show me any result. I am a beginner in javascript and d3.js and I hope you can help me. In addition, i read so many links such as https://bl.ocks.org/cagrimmett/07f8c8daea00946b9e704e3efcbd5739 and others, also in stackoverflow but i did not find anything.
here is my code:
<!DOCTYPE html> <html> <head> <script src="http://d3js.org/d3.v4.min.js"></script> </head> <body> <div id="grid"></div> <script> //creat 1670 numbers of matrices with size of 180*90 var myMatrix = new Array(1670) for (var i = 0; i < 1670; i++) { myMatrix[i] = twodmatrix() } function twodmatrix() { var myMat = new Array(180) for (var i = 0; i < 180; i++) { myMat[i] = new Array(90) } return (myMat) } //read from file d3.text("tempanomaly_new.txt", function(data) { myMatrix = data }) // save the values of one matrix in color matrix const NUM_COLOR = 16200; var colorArr = new Array(NUM_COLOR); for (var i = 0; i < NUM_COLOR; i++) { colorArr[i] = getColor(); } function getColor() { color = "#" + [Math.floor(Math.values(myMatrix) * 16)]; return color; } const BLOCK_SIZE = 30; const BLOCK_SPACE = 5; var gridData = new Array(180) for (var i = 0; i < 180; i++) { gridData[i] = new Array(90) for (var j = 0; j < 90; j++) { gridData[i][j] = { x: (i + 1) * BLOCK_SIZE + BLOCK_SPACE, y: (j + 1) * BLOCK_SIZE + BLOCK_SPACE, size: BLOCK_SIZE, color: colorArr[(i * 10 + j) % NUM_COLOR] } } } var grid = d3.select("#grid") .append("svg") .attr("width", "100%") .attr("height", "100%") .style("color", "#b2b2b2"); var row = grid.selectAll(".row") .data(gridData) .enter().append("g") .attr("class", "row"); var column = row.selectAll(".square") .data(function(data) { return data; }) .enter() .append("rect") .attr("class", "square") .attr("x", function(data) { return data.x; }) .attr("y", function(data) { return data.y; }) .attr("width", function(data) { return data.size; }) .attr("height", function(data) { return data.size; }) .style("fill", function(data) { return data.color; }) .style("stroke", "#222"); </script> </body> </html>
I do not have any result, and my program take too much time like stuck in a loop
1 answers
solution1
0 2019-05-22 13:40:21
<!DOCTYPE html> <html> <head> <script src="http://d3js.org/d3.v4.min.js"></script> </head> <body> <div id="grid"></div> <script> //create 1670 numbers of matrices with size of 180*90 var myMatrix = new Array(1670) for (var i=0; i<1670; i++){ myMatrix[i] = twodmatrix() } function twodmatrix(){ var myMat = new Array(180) for (var i=0; i<180; i++){ myMat[i] = new Array(90) } return(myMat) } const NUM_COLOR = 16200; var colorArr = new Array(NUM_COLOR); for (var i = 0; i < NUM_COLOR; i++) { colorArr[i] = getColor(); } d3.text("tempanomaly_new.txt", function(data){ myMatrix = data }) function getColor() { color = "#"+[Math.floor(myMatrix)].toString(16); // Math.values is not a function, myMatrix is empty array cause of missing file return color; } const BLOCK_SIZE = 30; const BLOCK_SPACE = 5; var gridData = new Array(180) for (var i = 0; i < 180; i++) { gridData[i] = new Array(90) for (var j = 0; j < 90; j++) { gridData[i][j] = { x: (i + 1) * BLOCK_SIZE + BLOCK_SPACE, y: (j + 1) * BLOCK_SIZE + BLOCK_SPACE, size: BLOCK_SIZE, color: colorArr[(i * 10 + j) % NUM_COLOR] } } } var grid = d3.select("#grid") .append("svg") .attr("width", "5500px") .attr("height", "3000px") .style("color", "#b2b2b2"); var row = grid.selectAll(".row") .data(gridData) .enter().append("g") .attr("class", "row"); var column = row.selectAll(".square") .data(function(data) { return data; }) .enter() .append("rect") .attr("class", "square") .attr("x", function(data) { return data.x; }) .attr("y", function(data) { return data.y; }) .attr("width", function(data) { return data.size; }) .attr("height", function(data) { return data.size; }) .style("fill", function(data) { return data.color; }) .style("stroke", "#222"); </script> </body> </html>
- Math.values isn't a function.
- d3.text(file, function(data) { myMatrix = data; }, are you sure it is working ?
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.