过滤CSV行以返回图表

Question

我挣扎得到这个代码工作

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 

我试过过滤它作为一个字符串藏汉。我也试着将它解析为一个整数。

控制台中没有错误，但没有显示在屏幕上。我搜索了高和低，但没有发现任何帮助我。

Answer 1

我不太了解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变量现在这里，但也许你需要它在其他地方...