Javascript 筛选CSV行以返回图表

我正在努力让这个代码正常工作

var theBeeyatch = d3.csv("data/SalesDUMP.csv", function(csv) {

    csv = csv.filter(function(row) {
        return row['Year'] == '2012' || row['Month'] == '1';
    })
});

var Chart = d3.select("body")
    .append("svg")
    .attr("width", 400)
    .attr("height", 200)

    .selectAll("rect")
    .data(theBeeyatch)
    .enter().append("rect")
    .attr("x", function (d, i) {return i * 20 + 20;})
    .attr("y", 100)
    .attr("width", 20)
    .attr("height", function (d) {return d.Year;});

CSV文件如下所示

Year,Month,ProductClass,Sales
2011,1,BA  ,28840
2011,1,BH  ,2800
2011,1,MB  ,1103200
2012,1,BA  ,70680
2012,1,MB  ,1596000
2012,1,_OTH,1530
2013,1,BA  ,120513.6
2013,1,BH  ,17640
2013,1,MB  ,1852761.6

我也尝试过将其作为字符串过滤。我还尝试将其解析为整数

---

控制台中没有错误，但屏幕上没有显示任何内容。我到处搜索，但没有找到对我有帮助的东西。

我对d3库不太了解，但它看起来似乎是异步调用的

d3.csv

。当函数返回时，您的

theBeeyatch

变量将没有任何有意义的数据。也许这会奏效：

var theBeeyatch = d3.csv("data/SalesDUMP.csv", function(csv) {
    csv = csv.filter(function(row) {
        return row['Year'] == '2012' || row['Month'] == '1';
    });

    var Chart = d3.select("body")
        // ...
        .selectAll("rect")
        .data(csv)
        // ...
});

---

当然，您现在不需要这里的

theBeeyatch

变量，但可能您在其他地方需要它…

我对d3库不太了解，但它看起来好像

d3.csv

调用是异步的。当函数返回时，您的

theBeeyatch

变量将没有任何有意义的数据。也许这会奏效：

var theBeeyatch = d3.csv("data/SalesDUMP.csv", function(csv) {
    csv = csv.filter(function(row) {
        return row['Year'] == '2012' || row['Month'] == '1';
    });

    var Chart = d3.select("body")
        // ...
        .selectAll("rect")
        .data(csv)
        // ...
});

当然，您现在不需要这里的

theBeeyatch

变量，但可能您在其他地方需要它