错误：<rect> 属性 width="NaN" 的值无效答案

【问题标题】：Error: Invalid value for <rect> attribute width="NaN"错误：<rect> 属性 width="NaN" 的值无效
【发布时间】：2013-08-18 08:52:49
【问题描述】：

我对 d3 完全陌生。我已经完成了 Scott Murray 的“Web 的交互式数据可视化”中的很多图表和示例，并且几乎没有遇到任何问题。这是我第一次尝试使用未包含在我的代码中的大型数据集。

d3.csv("historical_weather.csv", function(error,data) {

    dataset = data.map(function(d){ 
        return [ parseInt(+d.cloudCover),parseInt(+ d.maxTemp) ];
    })

    console.log(dataset); 

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

    d3.select("svg")
        .selectAll("rect")
        .data("dataset")
        .enter()
        .append("rect")
        .attr("height",50)
        .attr("width", function(d){return d.maxTemp*10;});

});

数据加载并在控制台中显示为数组，我可以在挖掘数组时看到预期值。但是控制台显示：

错误：属性 width="NaN" 的值无效

【问题讨论】：

标签： d3.js

【解决方案1】：

看来你有错别字。表示.data("dataset") 的行应改为.data(dataset)，不带引号。即，您应该提交 dataset 变量，而不是包含其名称的字符串。

【讨论】：

谢谢yony....这么简单的事情却造成了这么多痛苦。这种语法的东西让我死了！！
@Banner 同意，d3js 语法很丑。

【解决方案2】：

.attr("width", function(d){return d.maxTemp*10;});

我相信function(d){return d.maxTemp*10;} 正在注册为数组，而不是具有简单返回值的函数。它不是一个数字 (NaN)

你不是在你的脚本中定义了两次function(d)，每一次都有完全不同的含义吗？

【讨论】：

这是不正确的。该函数是匿名的，并为dataset 中的每个元素调用。然后使用返回值设置"width"。