面临的问题：错误：<rect> 属性高度：预期长度，“NaN”和错误：<rect> 属性 y：预期长度，“NaN”答案

【问题标题】：Facing problem with : Error: <rect> attribute height: Expected length, "NaN" and Error: <rect> attribute y: Expected length, "NaN"面临的问题：错误：<rect> 属性高度：预期长度，“NaN”和错误：<rect> 属性 y：预期长度，“NaN”
【发布时间】：2021-02-18 06:14:25
【问题描述】：

我是 d3.js 的新手，现在正试图在条形图中可视化 csv。但面临这样的错误：错误：属性高度：预期长度，“NaN”和错误：属性y：预期长度，“NaN”。我的完整代码如下：需要专家建议。

csv 数据如下所示：年份，价值 AK,35 AK,55 铝，165 铝，323 AR,86 增强现实，155 亚利桑那州,409 亚利桑那州,719 加利福尼亚州,1891 加州,3390 一氧化碳,292 一氧化碳,442 计算机断层扫描,117 CT,220 德国,392 德国,1819 佛罗里达州,1064 佛罗里达州,1870 GA,423 GA,728 嗨,53 嗨,108 IA,75 爱荷华州,173 编号,62 编号,102 伊利诺伊州,551 伊利诺伊州,858 在,529 在,901 KS,102 堪萨斯州,206 肯塔基州,162 肯塔基州,251 洛杉矶,255 洛杉矶,684 马，350 马,621 医学博士,244 医学博士,439 我，71 我,125 密歇根州,353 小米,607 明尼苏达州,221 明尼苏达州,392 莫,184

<!doctype html>
<html>
<head>
    <style>`enter code here`
        .bar {
            fill: steelblue;
        }

        .highlight {
            fill: orange;
        }
</style>
    <script src="https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
<svg width="600" height="500"></svg>
<script>

    var svg = d3.select("svg"),
        margin = 200,
        width = svg.attr("width") - margin,
        height = svg.attr("height") - margin;

    svg.append("text")
       .attr("transform", "translate(100,0)")
       .attr("x", 50)
       .attr("y", 50)
       .attr("font-size", "24px")
       .text("Polarity visualization of csv data")

    var x = d3.scaleBand().range([0, width]).padding(0.4),
        y = d3.scaleLinear().range([height, 0]);

    var g = svg.append("g")
            .attr("transform", "translate(" + 100 + "," + 100 + ")");

    d3.csv("polarity.csv", function(error, data) {
        if (error) {
            throw error;
        }

        x.domain(data.map(function(d) { return d.year; }));
        y.domain([0, d3.max(data, function(d) { return d.value; })]);

        g.append("g")
         .attr("transform", "translate(0," + height + ")")
         .call(d3.axisBottom(x))
         .append("text")
         .attr("y", height - 250)
         .attr("x", width - 100)
         .attr("text-anchor", "end")
         .attr("stroke", "black")
         .text("Year");

        g.append("g")
         .call(d3.axisLeft(y).tickFormat(function(d){
             return "$" + d;
         }).ticks(10))
         .append("text")
         .attr("transform", "rotate(-90)")
         .attr("y", 6)
         .attr("dy", "-5.1em")
         .attr("text-anchor", "end")
         .attr("stroke", "black")
         .text("Stock Price");

        g.selectAll(".bar")
         .data(data)
         .enter().append("rect")
         .attr("class", "bar")
         .on("mouseover", onMouseOver) //Add listener for the mouseover event
         .on("mouseout", onMouseOut)   //Add listener for the mouseout event
         .attr("x", function(d) { return x(d.year); })
         .attr("y", function(d) { return y(d.value); })
         .attr("width", x.bandwidth())
         .transition()
         .ease(d3.easeLinear)
         .duration(400)
         .delay(function (d, i) {
             return i * 50;
         })
         .attr("height", function(d) { return height - y(d.value); });
    });
    
    //mouseover event handler function
    function onMouseOver(d, i) {
        d3.select(this).attr('class', 'highlight');
        d3.select(this)
          .transition()     // adds animation
          .duration(400)
          .attr('width', x.bandwidth() + 5)
          .attr("y", function(d) { return y(d.value) - 10; })
          .attr("height", function(d) { return height - y(d.value) + 10; });

        g.append("text")
         .attr('class', 'val') 
         .attr('x', function() {
             return x(d.year);
         })
         .attr('y', function() {
             return y(d.value) - 15;
         })
         .text(function() {
             return [ '$' +d.value];  // Value of the text
         });
    }

    //mouseout event handler function
    function onMouseOut(d, i) {
        // use the text label class to remove label on mouseout
        d3.select(this).attr('class', 'bar');
        d3.select(this)
          .transition()     // adds animation
          .duration(400)
          .attr('width', x.bandwidth())
          .attr("y", function(d) { return y(d.value); })
          .attr("height", function(d) { return height - y(d.value); });

        d3.selectAll('.val')
          .remove()
    }

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

【问题讨论】：

如果您提供来自polarity.csv 的数据示例将会很有帮助。
打印以控制台您从调用 d3.csv("polarity.csv", function(error, data) { ... console.log(data) ... 确保每个“数据”中的对象是有效的
嗨 Yakov，CSV 数据如下所示：年份，价值 AK，35 AK，55 AL，165 AL，323 AR，86 AR，155 AZ，409 AZ，719 CA，1891 CA， 3390 CO,292 CO,442 CT,117 CT,220 DE,392 DE,1819 FL,1064 FL,1870 GA,423 GA,728 HI,53 HI,108 IA,75 IA,173 ID,62 ID,102 IL ,551 IL,858 IN,529 IN,901 KS,102 KS,206 KY,162 KY,251 LA,255 LA,684 MA,350 MA,621 MD,244 MD,439 ME,71 ME,125 MI,353 MI,607 MN,221 MN,392 MO,184

标签： html d3.js bar-chart

【解决方案1】：

问题似乎是没有类型转换，这使得数据中的每个属性都是字符串。由于每个数字都是一个字符串，因此您不能将其传递给d3.max() 或scale.range()，因此会出现错误。

要转换 d3.v4 中的类型，您可以使用 d3.csv() 的第二个参数。它是一个在将数据发送到回调之前将 CSV 的每一行映射到另一个对象的函数。

让我们添加第二个参数。

目前，您有：

d3.csv("polarity.csv", function(error, data) {...})

相当于：

d3.csv("polarity.csv", (d) => (d), function(error, data) {...})

上面的代码是等价的，因为第二个参数只是一个恒等函数。在调用最后一个回调之前，d3.csv() 正在获取每一行并返回它而不做任何更改。

再进一步，同样的代码也等价于这个：

d3.csv("polarity.csv", (d) => ({... d}), function(error, data) {...})

上面的代码是等价的，因为{...d} 就是ES6 object destructuring notation。 d3.csv() 仍在获取每一行并返回它而不做任何更改。

到目前为止，我们只是更改了符号，而没有对数据进行任何更改。现在是进行类型转换的时候了。如果你知道d.value 是一个数字，你可以覆盖它并强制类型：

d3.csv("polarity.csv", (d) => ({... d, value: +d.value}), function(error, data) {...})

value: +d.value 表示我们正在获取d.value 字符串，将其转换为数字，然后将其分配回value 属性。

现在第二个参数进行了充分的类型转换，第三个回调中的data 将以d.value 作为数字，这将与d3.max() 和scale.range() 兼容

旁注：

随着d3.autoType() 的引入和d3.csv() 中Promises 的使用，这个过程在d3.v5 中变得更加容易。如果您正在学习一般的 D3 概念，并且您不依赖于特定项目的 d3.v4，我强烈建议您阅读有关 the changes between v4 and v5（只有少数）和有关 the use of d3.autoType() 的信息。

【讨论】：

现在已经解决了。感谢所有建议。