d3.js 数据数组 if 语句

Question

我正在尝试取消 y 值 > 5000 的行。这是包含来自 csv 文件的所有数据的图表：

http://dtech.id.lv/d3/origin.html

这是我尝试用 if 语句修改 forEach 函数的尝试：

http://dtech.id.lv/d3/modif.html

// Get the data
    d3.csv("data.csv", function(error, data) {
        data.forEach(function(d) {

            if (d.close < 5000) {
                less5000++;
      d.close = +d.close;
      d.date = parseDate(d.date);
            }
    if (d.close > 5000) {
                over5000++;
            }

    total++;

        });

这里有些地方不对，我不知道如何正确地写这个。有人可以指出我这样做的正确方法吗？谢谢！

Answer 1

错误在别的地方：

您的一些数据条目的日期格式错误，因此 x(d.date) 在您的值线方法中 returns NaN，无法显示并且 d3 崩溃（请参阅您的 JS 控制台 http://dtech.id.lv/d3/modif.html).

这就是您的第一个数据条目的样子，很好：{dd: "2016-03-13", date: Mon Jan 01 1900 00:00:03 GMT+0100 (CET), close: 131}

... 这就是您的数据集中无效的样子：{dd: "2016-03-13", date: "10:54:43", close: "10465"}

您中大约有 20 个数据条目包含无效的日期对象data.csv

更新

上述行为是因为，如果 d.close 为 5000 或更多，则您不解析 d.date。将您的代码更新为

// Get the data
d3.csv("data.csv", function(error, data) {
     data.forEach(function(d) {
         if (d.close < 5000) {
              less5000++;
         }
         if (d.close > 5000) {
              over5000++;
         }

         d.close = +d.close;
         d.date = parseDate(d.date);

         total++;
     });
...

更新 2

要过滤数组，请使用 array.filter（参见：https://github.com/mbostock/d3/wiki/Arrays）！你的情况：

// Get the data
d3.csv("data.csv", function(error, data) {
     data = data.filter(function(d){
          d.close = +d.close;
          d.date = parseDate(d.date);

          return d.close < 5000;
     });
...

数据将只包含 d.close 小于 5000 的条目。

d3.js 数据数组 if 语句

d3.js data array if statement

linechart

d3.js