2016-10-04 7 views
0

この質問は数回見られましたが、通常はタイプミスを修正して解決しますが、私はcsvとしてデータをロードするときにのみエラーが発生するので、私はどのタイプミスを持っていると思う。スクリプトはjsonと同じデータを読み込むのに問題はありません。エラー:d3.v4.min.js:3エラー:<rect>属性の幅:予想される長さ "NaN"

d3.csv("mydata.csv", function(data) { 
 

 
      var canvas = d3.select("body").append("svg") 
 
       .attr("width", 500) 
 
       .attr("height", 500) 
 

 
      canvas.selectAll("rect") 
 
       .data(data) 
 
       .enter() 
 
       .append("rect") 
 
       .attr("width", function(d) { 
 
        return d.age * 10; 
 
       }) 
 
       .attr("height", 46) 
 
       .attr("y", function(d, i) { 
 
        return i * 50; 
 
       }) 
 
       .attr("fill", "blue"); 
 

 
      canvas.selectAll("text") 
 
       .data(data) 
 
       .enter() 
 
       .append("text") 
 
       .attr("fill", "white") 
 
       .attr("y", function(d, i) { 
 
        return i * 50 + 24; 
 
       }) 
 
       .text(function(d) { 
 
        return d.name; 
 
       }) 
 

 

 

 

 
     })

そして、ここに私のデータファイルは、次のとおりです。

JSON:

[ 
 
    {"name": "George", "age": 50}, 
 
    {"name": "Carla", "age": 29}, 
 
    {"name": "Bobby", "age": 18} 
 
]

CSV:

"name", "age" 
 
"george", 50 
 
"carla", 29 
 
"bobby", 18

答えて

0

あなたのCSVにスペースを削除します。

"name","age" 
"george",50 
"carla",29 
"bobby",18 

d3.csvは、RFC 4180に基づいて、言うた:

Spaces are considered part of a field and should not be ignored.

ワーキングplunkr:https://plnkr.co/edit/e1Xtz9L8NnUz8FYPRT5G?p=preview

関連する問題