D3 data.map関数でエラーが発生しました

私はx座標とy座標を持つcsvファイルを読み込み、その座標で円を作成しようとしています。私はcsvファイルをロードする方法を理解していると私はコンソールに座標を記録することができますが、なぜ私は円を作成しようとするとログ関数Not_a_numberを返すのか分からない。私のdata.map関数に問題はありますか？おかげでここD3 data.map関数でエラーが発生しました

コード：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<script type="text/javascript" src="d3/d3.v3.js"></script> 
<style type="text/css"> 
    /* No style rules here yet */  
</style> 
</head> 
<body> 
<script type="text/javascript"> 

    //Width and height 
    var w = 900; 
    var h = 500; 
    var padding = 20; 
    var dataset = []; 

    d3.csv("dataset.csv", function(data) { 
     dataset = data.map(function(d,i) { 
     //THIS WORKS 
     console.log(d); 
     console.log(i); 
     return [ +d["x-coordinate"], +d["y-coordinate"] 
     ]; }); 


    //Create SVG element 
    var svg = d3.select("body") 
       .append("svg") 
       .attr("width", w) 
       .attr("height", h); 

    svg.selectAll("circle") 
     .data(dataset) 
     .enter() 
     .append("circle") 
     .attr("cx", function(d) { 
      //THIS DOESNT WORK 
      console.log(d); 
      return d[0]; 
     }) 
     .attr("cy", function(d) { 
      return d[1]; 
     }) 
     .attr("r", function(d) { 
      return d[1]; 
     }) 

    }); 

</script> 
</body> 
</html>

出典

2016-06-16 Art_Knopfler

それは非同期d3.csv内にロードされた後、あなたはdatasetにのみアクセスすることができます。

のコードが実行されます。これは、ファイルがロードされた後にのみ実行されることを意味します。その下にあるコードの前に実行されることは保証されません。

d3.csv("dataset.csv", function(data) { 
    dataset = data.map(function(d,i) { 
    //THIS WORKS 
    console.log(d); 
    console.log(i); 
    return [ +d["x-coordinate"], +d["y-coordinate"] 
    ]; }); 

    //Create SVG element 
    var svg = d3.select("body") 
       .append("svg") 
       .attr("width", w) 
       .attr("height", h); 

    svg.selectAll("circle") 
    .data(dataset) 
    .enter() 
    .append("circle") 
    .attr("cx", function(d) { 
      //THIS DOESNT WORK 
      console.log(d); 
      return d[0]; 
    }) 
    .attr("cy", function(d) { 
      return d[1]; 
    }) 
    .attr("r", function(d) { 
      return d[1]; 
    }) 
    .text("hello world"); 

});

あるいは、メソッドを作成し、d3.csv内部その方法にdatasetを渡します。

出典

2016-06-16 10:33:00 paradite

私は理解してくれてありがとうございますが、今は、 "cx"から座標をログに記録するとき、ナンは値がないと言っています。私はデータセット内の要素の属性を選択するのは正しい方法ではないと思いますが、どうやって行うのかわかりません。 –

'' SVG要素を作成する 'の前に 'data'と' dataset'をロギングして、それを質問に追加してみてください。 – paradite

ありがとう、私は私の質問を変更しました。誰かが助けてくれることを願っています –

D3 data.map関数でエラーが発生しました

答えて

関連する問題