Я хочу создать трехмерную матрицу и заполнить ее значениями из текстового файла, затем создать сетку размером 180 * 90 и раскрасить ее в соответствии со значениями из моей матрицы,
например: синий для отрицательных значений, красный для положительных и белый для нулевых значений.
Я хочу сохранить то, что прочитал из моего текстового файла, в 3D-матрице.
но у меня проблема, когда я выполняю свой HTML-файл и использую
console.log(myMatrix) показывает мне undefined, а когда я копирую-вставляю for-loop в консоли,
например
console.log(myMatrix[0][0][4]) показывает мне правильный ответ 90.
так что я думаю, возможно, проблема связана с javaScript , потому что js читает весь код, а когда я пытаюсь console.log(myMatrix[0][0][4]), он показывает мне undefined, потому что чтение файла и сохранение в Массив не завершен, но когда я использую консольную команду, потому что она находится в оперативной памяти, я вижу правильный ответ.
поэтому я решил проверить, что чтение файла и сохранить его в массиве завершено, а затем выполнить мой for-loop для сохранения значений из массива в myMatrix. Но я не знаю, как я могу это сделать?
Я пытался использовать setTimeout, но я подумал, что, может быть, время выполнения в моей системе отличается от другой системы или также от сети. Также я думал о функции обратного вызова, но я ничего не добился. Надеюсь, ты мне поможешь.
это мой код:
<!DOCTYPE html>
<html>
<head>
<script src="https://d3js.org/d3.v5.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)
}
var myGrid = new Array(1670)
for (var i=0; i<1670; i++){
myGrid[i] = twodmatrix()}
var array = new Array()
xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET", "tempanomaly_new.txt", true);
xmlhttp.send();
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
parse(xmlhttp.responseText);
}
}
function parse (text) {
array = text.split(",");
return array
//Do something
}
function treeDmatrix(){
var n=0;
for(var i=0;i<1670;i++){
for(var j=0;j<180;j++){
for(var k=0; k<90; k++){myMatrix[i][j][k]= array[n];
n +=1;}}}
}
/*var mycolor;
for(var i=0; i<array.length; i++){
if (array[i] == 0){ function white(){ mycolor = d3.scalelinear().domain([1,5]).range(["white"])}}
else if (array[i] > 0 ){ function red(){ mycolor = d3.scalelinear().domain([1,5]).range(["red"])}}
else if (array[i] < 0 ){function blue(){ mycolor = d3.scalelinear().domain([1,5]).range(["blue"])}}
}
/* Start make a grid and color it */
/*
const BLOCK_SIZE = 30;
const BLOCK_SPACE = 5;
const ROW_SIZE = 90;
const COL_SIZE = 180;
gridData = new Array(COL_SIZE);
for (var i = 0; i < COL_SIZE; i++) {
gridData[i] = new Array(ROW_SIZE);
for (var j = 0; j < ROW_SIZE; j++) {
gridData[i][j] = {
x: (i + 1) * BLOCK_SIZE + BLOCK_SPACE,
y: (j + 1) * BLOCK_SIZE + BLOCK_SPACE,
size: BLOCK_SIZE,
}}}
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("stroke", "#222")
.style("fill", function(data) { return mycolor(data)});*/
</script>
</body>
</html>