时间戳

首页 > 解决方案 > 使用 d3.js 解析浮动 csv 文件

d3.js - 使用 d3.js 解析浮动 csv 文件

问题描述

我目前有这个代码

    d3.csv("month.csv", function(data) {'
    var w = 600;  
    var h = 300;
    var barPadding = 1;
    data.forEach(function(d) {
         d.count = parseFloat(d.count);
         d.value = +d.value;`
     });
    var xScale = d3.scaleBand()
                  .domain(d3.range(data.length))
                  .rangeRound([0,w])`
                  .paddingInner(0.05);`
    var yScale = d3.scaleLinear()`
                  .domain([0, d3.max(data.count)])
                  .rangeRound([0,h]);
    function barChart(){
     var svg = d3.select("#bar1")
                .append("svg")
                .attr("width", w)
                .attr("height", h);
    })

但是在我运行它之后，它说

意外的 NaN 解析 y 属性

我做了一个console.log(data.count)，它说undefined

月.csv
月 | 计数
1 | 1128
2 | 1327
3 | 1573
4 | 1264
5 | 1143
6 | 1483
7 | 1190
8 | 1338
9 | 1707
10 | 2310
11 | 2657
12 | 1505

编辑

如果我做一个console.log(d.count)inside，data.foreach(function(d)我会得到我需要的价值。

标签： d3.js

解决方案

问题是将 data.count 传递给 d3.max 函数。由于 data 是一个对象数组，因此 data.count 会尝试访问该数组的 count 属性。

相反，您必须提供一个函数作为 d3.max 函数的第二个参数，该函数将访问作为第一个参数传递的数据数组的每个元素的 count 属性，如下所示：

d3.max(data, d => d.count);

或使用旧的函数格式：

d3.max(data, function(d) { return d.count; });

推荐阅读