我正在尝试从 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");
})
}