D3 和颜色网格答案

【问题标题】：D3 and color gridD3 和颜色网格
【发布时间】：2019-10-08 23:36:15
【问题描述】：

我有一个巨大的文本文件，名称为“tempanomaly_new.txt”，我有 1670 个大小为 180*90 的二维数组。我阅读了文本文件并将值保存在 myMatrix 中。之后，我尝试为我的数组之一创建一个网格，180*90，我想从 myMatrix 读取值并保存在 gridData 数组中，以便用这些值为我的网格着色。但是我有一个大问题，因为当我执行我的代码时，它花费了太多时间并且没有显示任何结果。我是 javascript 和 d3.js 的初学者，希望你能帮助我。此外，我在stackoverflow中也阅读了很多链接，例如https://bl.ocks.org/cagrimmett/07f8c8daea00946b9e704e3efcbd5739等，但我没有找到任何东西。

这是我的代码：

<!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>

我没有任何结果，而且我的程序需要太多时间，就像卡在一个循环中一样

【问题讨论】：

我必须评论说：color = "#"+[math.floor(myMatrix)].tostring(16)

标签： javascript arrays d3.js gridview grid

【解决方案1】：

<!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 不是函数。
d3.text（文件，函数（数据）{ 我的矩阵 = 数据； }，你确定它工作正常吗？

【讨论】：

是的，我确定。因为当我写 console.log(myMatrix) 时，我可以在 myMatrix 中看到我的文本文件的值
第一个问题，我被删除了，但由于我的错误，我的代码的某些部分被删除并替换为其他代码。现在我更正了它们，但我的问题没有解决