2017-12-19 14 views
0

私はCSVからデータを収集するためにd3.csv関数を使用する方法をしばらく検索していました。それは、forループが何回実行されるべきかを設定するために、別の関数で 'forループ'内にあります。d3.csv:forループ引数で使用する特定の行データの使用

以下は、問題の2つの機能を示す私のコードの主なレイアウトです。 'createLights関数'では、 'createLights'関数の 'lightPol'変数がforループを実行してランダムなSVG四角形を生成するために、特定の行を返すように 'getData'関数を呼びたいと思っていました。

しかし、javascriptとd3の非同期性のため、私はこれを行うことができませんでした。私はd3の初心者ですので、実際にその特徴を理解していません。 d3.csv("py/Resources.scv")のコールバックで

<...> 
 

 
    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

dataはあなたが必要なすべてを開催します。私は、コードの特定の構造を知りませんが、あなたはそのコールバックの内側に描画し、すべてをやっての簡単な方法を最初に行くことができCreateLightは、内部のGetDataのものでなければならないわけ

+0

さて、私は2つの機能を統合するために管理しています私はD3を初めて使っているので、既存のSVGコンテナを持っているときにD3を使用してSVG四角形を作成する方法を思い出すようには思われません –

+0

それは別の質問になるはずですが、例えば、d3データを与え、svgにrecを追加します。このリンクを試してみてください:https://www.dashingd3js.com/svg-basic-shapes-and-d3js –

+0

リンクありがとうございます!私は今SVGを作成することができました、助けてくれてありがとう! –

関連する問題