d3.js 过滤嵌套数据中的空值

Question

我正在制作各种财务信息图表，例如折线图、条形图和饼图。数据来自客户端，格式为 .csv，带有一些用连字符表示的空值。数据的格式不是我可以改变的。这是一个例子：

    Month,Actual,Forecast,Budget
    Jul-14,200000,-,74073.86651
    Aug-14,198426.57,-,155530.2499
    Sep-14,290681.62,-,220881.4631
    Oct-14,362974.9,-,314506.6437
    Nov-14,397662.09,-,382407.67
    Dec-14,512434.27,-,442192.1932
    Jan-15,511470.25,511470.25,495847.6137
    Feb-15,-,536472.5467,520849.9105
    Mar-15,-,612579.9047,596957.2684
    Apr-15,-,680936.5086,465313.8723
    May-15,-,755526.7173,739904.081
    Jun-15,-,811512.772,895890.1357

我一直在使用以下代码嵌套数据并且它工作正常，除了空值导致我出现各种问题。

    d3.csv("data/net.csv", function(error, data) {
      var headers = d3.keys(data[0]).filter(function(head) {
      return head != "Month";
    });

            data.forEach(function(d) {
              d.month = parseDate(d.Month);
    });

      var categories = headers.map(function(name) { 

        return {
          name: name, 
          values: data.map(function(d) { 
            return {
              date: d.month, 
              rate: +(d[name]),
              };
          }),
        };

      });

当我定义一条线时没有问题，因为我可以使用 .defined，但是为了在数据点上附加圆圈或在条形图上附加矩形，它会导致 NaN 破坏可视化。

理想情况下，我希望嵌套数据不包含空数据点，而不是在渲染后尝试处理形状。也就是说，根据上面的数据，我希望 'actual' 和 'forecast' 数组只有六个对象，而 'budget' 数组有 12 个对象。我还需要保留索引值。

有没有办法过滤嵌套过程以排除空值？

Answer 1

在像这样嵌套之前添加一个过滤器以删除所有 NaN 元素：

 return {
              name: name,
              values: data.filter(function(k){return !isNaN(+k[name]);}).map(function(d) {
                return {
                  date: d.month,
                  rate: +(d[name]),
                };
              }),
            };

工作代码here

希望对您有所帮助！

d3.js 过滤嵌套数据中的空值

d3.js filter null values in nested data

javascript

nested

filter

d3.js