用過濾器讀取tsv文件

Question

我想從tsv文件中繪製一個簡單的條形圖，並希望得到一些幫助。

首先，這裏是一個示例輸入文件：

ind count  
0 1228 

1 0 

2 238 

3 9 

我需要繪製的記錄（Y軸）與「計數」（X軸）數。

用戶可以通過HTML頁面的選項來決定什麼「計數」值爲 抑制數據。例如，取消所有記錄count=0。更改記錄數量以及數據範圍會影響兩個軸的比例。

我沒有問題獲取所有數據並設置軸的比例。從文件（d3.tsv ...）讀取數據後，我將其作爲第一步。但是當我只想使用輸入文件的部分數據時，我該怎麼做？我用

d3.max(data, function(d){ return +d.indx} 

得到我的輸入文件中的記錄數。

我確實玩過filter()方法，但是（除了目前爲止還沒有成功）我仍然認爲正確的地方過濾數據會很快 - 當讀取輸入文件時。

很可能這是如此的明顯以至於答案會讓我臉紅，但我的大腦已經放棄了 。有了這個，謝謝你的迴應！

而現在，這裏是我的一些代碼：

function drawBarGraph(minCountNum){ 
    d3.tsv("../../data/test.tsv", function(error, data){    //get the number of rows and the largest number of the "total" column for scaling purposes 

    //y-axis: use number of lines in input file 
    var bar_num = d3.max(data, function(d) { return +d.indx;});     //use plus sign (+) in front of a variable to ensure conversion to a numeric value. 
    //x-axis: use largest value of "total reads" from input file;   
    var data_max = d3.max(data, function(d) { return +d.total;}); 
    //set up canvas size 
    var margin = { top: 30, right: 20, bottom: 40, left: 50}, 
     width = 800 - margin.left - margin.right,     
     height = 2 * bar_num + 2;             //each bar is 1px high and spaced by 1px; add 2px to the bottom to allow a little space between the xAxis and the first data point 

    var bar_height = 1;   //yes, draw the bars 1px high             

    //set up the x and y scales 
    var xScale = d3.scale.linear() 
       .domain([0, data_max])  //define original range with min and max 
       .range([0, width]);   //define what resulting range should be 
    var yScale = d3.scale.linear() 
       .domain([0, bar_num*2])   
       .range([0, height]);   

    //set up the x and y axes 
    var xAxis = d3.svg.axis() 
       .scale(xScale) 
       .orient("bottom") 
       //.ticks(5);    //let d3 decide on the number of ticks used or calculate based on longest x-value 
    var yAxis = d3.svg.axis() 
       .scale(yScale) 
       .orient("left") 
       .ticks(0);     //no ticks or make them the index or node id's 

    var canvas = d3.select("body") 
       .append("svg") 
        .attr("width", width + margin.left + margin.right)  
        .attr("height", height + margin.top + margin.bottom)  
       .append("g")     
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 

    var div = d3.select("body").append("div") 
       .attr("class", "tooltip") //add the CSS tooltip 
       .style("opacity", 0); 

    canvas.selectAll("rect")     
       .data(data) 
       .enter()      
       //.filter(function(d) { return +d.total > 0; }) //this returns 'undefined' 
        .append("svg:a") 
         .attr("xlink:show", "new") 
          .attr("xlink:href", function(d){return ncbi_url + d.taxon_id;}) 
        .append("rect")   
        .attr("width", function(d) { return xScale(d.total);}) 
        .attr("height", bar_height)  
        .attr("y", function(d,i){ return i * (bar_height + 1);}) 
        .attr("fill", function(d) { return d.color;}) 
        .on("mouseover", function(d){ 
         div.transition() 
          .duration(200) 
          .style("opacity", .9); 
         div.html(
           "Node ID: " + d.id + "<br/>Tot. Reads: " + d.total) 
          .style("left", (d3.event.pageX) + "px") 
          .style("top", (d3.event.pageY - 28) + "px"); 
        }) 
        .on("mouseout", function(d){ 
         div.transition() 
          .duration(500) 
          .style("opacity", 0); 
        }); 

    canvas.append("g")            
        .attr("transform", "translate(0," + height + ")") 
        .call(xAxis); 

    canvas.append("text") //add the x-axis label 
        .attr("x", (width/2)) 
        .attr("y", height + margin.bottom)   
        .style("text-anchor", "middle") 
        .text("Total Reads"); 

    canvas.append("g")            
        .call(yAxis); 

    canvas.append("text") //add the y-axis label 
        .attr("transform", "rotate(-90)") 
        .attr("y", 0 - margin.left + 20)    
        .attr("x", 0 - (height/2)) 
        .attr("dy", "1em") 
        .style("text-anchor", "middle") 
        .text("Node #"); 

    canvas.append("text") //add a title 
        .attr("x", (width/2)) 
        .attr("y", 0 - (margin.top/2)) 
        .attr("text-anchor", "middle") 
        .style("font-size", "20px") 
        .style("text-decoration", "underline") 
        .text("Node Plot"); 
}) 

} 

Answer 1

是，要做到這一點，最好的辦法是獲得數據之後，以確保所有的後續操作只考慮你想要的子集。您可以使用.filter()函數。

var threshold = ...; 
var newdata = data.filter(function(d) { return +d.total > threshold; }); 

（我已經採取total作爲字段來過濾像在你的代碼已經發布）。