javascript - 加载并显示有条件的数据,但不满足条件
问题描述
var margin = {top: 20, right: 20, bottom: 30, left: 40},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
// set the ranges
var 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 margin
var 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 data
d3.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,sales
Bob,43
Robin,12
Anne,41
Mark,16
Joe,59
Eve,38
Karen,21
Kirsty,25
Chris,30
Lisa,47
Tom,5
Stacy,20
Charles,50
Mounir,56
解决方案
该结果是预期的:您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})
推荐阅读
- reactjs - paypal 中没有定义 paypal.Buttons.driver("react", { React, ReactDOM });
- r - 跟进:重新排序一个对称的小标题
- excel - 如何使用 Excel 的内置条件格式规则突出显示具有重复值的单元格,特别是比较 < 或 >?
- google-cloud-platform - Is there some special requirement to use Cloud Build Private Workers Pools?
- keras - Opening Phantom Zip Files with keras.utils.get_file()
- java - How to connect to Unix Domain Socket on client side service knowing only socket file descriptor
- xcode - How to use Fastlane to enable capabilities in provision profile?
- jooq - how to generate classes and properties using Entity bean class name and property names?
- typescript - 根据其他属性更改接口属性的类型
- php - custom donation amount in stripe (php)