Question

我正在尝试从tsv文件中绘制一个简单的条形图，并希望得到一些帮助。

首先，这是一个示例输入文件：

我需要绘制记录数（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作为要过滤的字段，就像您发布的代码一样。）

使用过滤器读取tsv文件

1 个答案: