加载并显示有条件的数据，但不满足条件

Question

即使我指定映射和大小。var margin = {top: 20, right: 20, bottom: 30, left: 40},    width = 960 - margin.left - margin.right,    height = 500 - margin.top - margin.bottom;// set the rangesvar x = d3.scaleBand()          .range([0, width])          .padding(0.1);var y = d3.scaleLinear()          .range([height, 0]);// append the svg object to the body of the page// append a 'group' element to 'svg'// moves the 'group' element to the top left marginvar svg = 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 + ")");// get the datad3.csv("data.csv", function(error, data) {  if (error) throw error;  // format the data  data.forEach(function(d) {    d.sales = +d.sales;  });在这里我指定数据域  // Scale the range of the data in the domains  x.domain(data.map(function(d) {if(d.sales>40){return d.salesperson;}}));  y.domain([0,d3.max(data, function(d) { return d.sales; })]);  // append the rectangles for the bar chart  let finalData=svg.selectAll(".bar")      .data(data.filter(function(d){if(d.sales>40) {return d;}}));      finalData.enter().append("rect")      .attr("class", "bar")      .attr("x", function(d) { return x(d.salesperson); })      .attr("width", x.bandwidth())      .attr("y", function(d) { return y(d.sales); })      .attr("height", function(d) { return height - y(d.sales); });在这里我添加轴  // add the x Axis  svg.append("g")      .attr("transform", "translate(0," + height + ")")      .call(d3.axisBottom(x));  // add the y Axis  svg.append("g")      .call(d3.axisLeft(y));});这是csv文件salesperson,salesBob,43Robin,12Anne,41Mark,16Joe,59Eve,38Karen,21Kirsty,25Chris,30Lisa,47Tom,5Stacy,20Charles,50Mounir,56

Answer 1

该结果是预期的：您undefined在秤的域中有值。

问题是Array.prototype.map不能跳过元素。例如：

const arr = [70, 20, 50, 80, 10, 90, 40];

console.log(arr.map(d => {

  if (d > 40) return d;

}))

如您所见，这不会过滤删除值小于 40 的元素的数组：数组的长度保持不变，但现在它有几个undefined.

因此，解决方案是过滤data，就像您在data()方法中所做的那样：

data = data.filter(function(d){if(d.sales>40) {return d;}})

并将该过滤后的数组用于比例域。

顺便说一句，您可以将过滤器简化为：

data = data.filter(function(d){return d.sales>40})