d3.csv:使用特定的行数据在for循环参数中使用

时间:2017-12-19 10:29:28

标签: javascript html csv d3.js

我一直在寻找使用d3.csv函数从CSV收集数据的方法,并返回一行,以便我可以在'for循环'中使用它来设置不同的函数应该运行for循环的次数。

以下是我的代码的主要布局,显示了两个有问题的功能。

使用我的'createLights函数',我希望它调用'getData'函数返回一个特定的行,以便'createLights'函数中的'lightPol'变量运行for循环来生成随机的SVG正方形。 / p>

然而,由于javascript和d3的异步性,我无法做到这一点。我是d3的初学者,所以不要真正理解它的某些特征。

<...>

    function createLights(tempHeight) {


      var lightPol = getData(1);;
      console.log(lightPol); //debug data to be retuend

      for (m = 0; m < lightPol; m++) { //amount egenrated
        tempHeight = tempHeight * 1.5;
        var window_height = Math.floor(Math.random() * 30) + 0; //pos rand
        var window_space = Math.floor(Math.random() * 20) + 10; //pos rand
        window_space = window_space + i;
        var shape1 = document.createElementNS(svgNS, "rect"); //to create a circle/rct 
//attributes
        document.getElementById("mysvg2").appendChild(shape1);

      }
    }

    function getData(pollution) {
      //console.log(pollution);//see if polution varible read right
      var dataset = [];

      d3.csv("py/Resources.csv", function(data) {

        dataset = data.map(function(d) {
          return +d.value;
        });
        //reutrn dataset[pollution]''
      });

      return 5; //placeholder of function, the d3 should generate a number and return it.


    }

1 个答案:

答案 0 :(得分:1)

data回调中的d3.csv("py/Resources.scv")会包含您需要的所有内容。我不知道你的具体代码结构,但你可以先用简单的方法做绘图和回调中的所有内容

这意味着CreateLight应该在GetData