Question

我目前有这段代码

    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

month.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)内执行data.foreach(function(d)，我会得到我需要的值。

Answer 1

问题是将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; });

Answer 2

从文档（https://github.com/d3/d3-dsv）：

要使用不同的分隔符，例如“|”表示管道分隔值，请使用d3.dsvFormat：https://github.com/d3/d3-dsv#dsvFormat

使用d3.js解析float csv文件

2 个答案: