D3 и цветная сетка - PullRequest
Новая
       19

D3 и цветная сетка

0 голосов
/ 22 мая 2019

У меня огромный текстовый файл с именем «tempanomaly_new.txt», и у меня 1670 наборов двумерных массивов размером 180 * 90. Я читаю текстовый файл и сохраняю значения в myMatrix. после этого я попытался создать сетку для одного из моих массивов, 180 * 90, и я хочу прочитать значение из myMatrix и сохранить в массиве gridData для окрашивания моей сетки с этими значениями. Но у меня большая проблема, потому что, когда я выполняю свой код, это занимает слишком много времени и не дает мне никакого результата. Я новичок в javascript и d3.js и надеюсь, что вы мне поможете. Кроме того, я прочитал так много ссылок, как https://bl.ocks.org/cagrimmett/07f8c8daea00946b9e704e3efcbd5739 и другие, также в stackoverflow, но я ничего не нашел.

вот мой код: 

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

У меня нет никакого результата, и моя программа занимает слишком много времени, как застрявшая в цикле

1 Ответ

0 голосов
/ 22 мая 2019 

<!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>
  1. Math.values ​​не является функцией.
  2. d3.text (файл, функция (данные) {myMatrix = data;},ты уверен, что он работает?
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...