過濾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變量現在這裏，但也許你需要它在其他地方...