错误：d3.v4.min.js:3 错误：<rect> 属性宽度：预期长度，“NaN”答案

【问题标题】：Error: d3.v4.min.js:3 Error: <rect> attribute width: Expected length, "NaN"错误：d3.v4.min.js:3 错误：<rect> 属性宽度：预期长度，“NaN”
【发布时间】：2016-10-04 23:14:08
【问题描述】：

我已经多次看到这个问题，通常可以通过修复拼写错误来解决，但我认为我没有任何拼写错误，因为我只在将数据加载为 csv 时遇到错误。脚本加载与 json 相同的数据没有问题。

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

【问题讨论】：

标签： javascript json csv d3.js

【解决方案1】：

删除 CSV 中的空格：

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

d3.csv 基于 RFC 4180，它说：

空格被视为字段的一部分，不应被忽略。

工作小伙伴：https://plnkr.co/edit/e1Xtz9L8NnUz8FYPRT5G?p=preview

【讨论】：