Question

我有一个巨大的文本文件，我想通过创建1670个尺寸为180 * 90的矩阵来可视化我的数据，并从我的巨大文件中读取数据来填充它们。

我写了一些代码，制作了3D数组，内部数组是2D数组，其尺寸为180 * 90。我试图用d3.js创建一个网格，但不幸的是我没有结果。

此外，我阅读了太多文档，并检查了很多链接，例如：

和stackoverflow，但是我不知道该怎么做。实际上，我是d3.js和javascript的初学者。我需要帮助来深入了解d3中grid的含义。

 -------------------------------------------------------------------------   
       //start working with file 
        <div id="D3lines"></div>
        <script>


var myMatrix = new Array(1670)
         for (var i=0; i<myMatrix.length; i++){
                    myMatrix[i] = twodmatrix()}
         function twodmatrix(){
                var myMat = new Array(180)
                for (var i=0; i<myMat.length; i++){
                    myMat[i] = new Array(90)}
                return(myMat)}
        d3.text("tempanomaly_new.txt", function(data){
        var text1 = d3.csv.parseRows(data).map(function(row){ 
                return row.map(function(value) { 
                return +value;}); }); 
            for(var i = 0; i<myMatrix.length; i++){
            myMatrix[i] = text1;}
            console.log(text1);});
        var width = 1670;
        var height = 90;
        var lineGraph = d3.select("#D3lines")
                .append("svg:svg")
                .attr("width", width)    
                .attr("height", height); 
        for (var j1=0; j1 <= width; j1= j1+1) {
         for (var j = 0; j<twodmatrix.length; j = j+ 25){
            lineGraph.append("svg:line")
                .attr("x1", 25)
                .attr("y1", j)
                .attr("x2", 89)
                .attr("y2", j)
                .style("stroke", "rgb(6,120,155)")
                .style("stroke-width", 2);};

        // Using for loop to draw multiple vertical lines
        for (var j=0; j <89; j=j+25) { lineGraph.append("svg:line")
                            .attr("x1", j)
                            .attr("y1", 25)
                                .attr("x2", j)
                            .attr("y2", 179)
                            .style("stroke", "rgb(6,120,155)")
                    .style("stroke-width", 2);};};

使用文本文件中的数据创建颜色矩阵

0 个答案: