Javascript 从散点图D3js中的滑块过滤csv数据
我想使用简单散点图中的滑块从csv过滤数据 我的问题是过滤器有点混乱。当我使用滑块时,它会显示点,但不是我想要的点 我试过了,但最后修改了 这是我的代码片段,请询问我是否需要所有:Javascript 从散点图D3js中的滑块过滤csv数据,javascript,csv,d3.js,filter,Javascript,Csv,D3.js,Filter,我想使用简单散点图中的滑块从csv过滤数据 我的问题是过滤器有点混乱。当我使用滑块时,它会显示点,但不是我想要的点 我试过了,但最后修改了 这是我的代码片段,请询问我是否需要所有: d3.csv("cereal.csv", function(error, data) { var dateSlider = d3.select('#slider') .call(d3.slider().axis(true).min(2006).max(2009).step(1) .on("slide",
d3.csv("cereal.csv", function(error, data) {
var dateSlider = d3.select('#slider')
.call(d3.slider().axis(true).min(2006).max(2009).step(1)
.on("slide", function(evt, value) {
dots.each(function(d) {
this.style.opacity = d.Date != value ? 1 : 0;
});
})
);
// change string (from CSV) into number format
data.forEach(function(d) {
d.Calories = +d.Calories;
d.Protein = +d.Protein;
});
// don't want dots overlapping axis, so add in buffer to data domain
xScale.domain([d3.min(data, xValue)-1, d3.max(data, xValue)+1]);
yScale.domain([d3.min(data, yValue)-1, d3.max(data, yValue)+1]);
// x-axis
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis)
// y-axis
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
// draw dots
var dots = svg.selectAll(".dot")
.data(data)
.enter().append("circle")
.attr("class", "dot")
.attr("r", 7)
.attr("cx", xMap)
.attr("cy", yMap)
.style("fill", "steelblue")
.on("mouseover", function(d) {
console.log(d.Date)
});
});
这是我的csv:
Date,CerealName,Manufacturer,Type,Calories,Protein
2006,cereal-one,Nabisco,C,70,4
2006,cereal-two,Quaker Oats,C,120,3
2006,cereal-three,Kelloggs,C,74,4
2006,cereal-four,Kelloggs,C,50,4
2006,cereal-five,Ralston Purina,C,110,2
2006,cereal-six,General Mills,C,110,4
2006,cereal-seven,Kelloggs,C,110,6
2007,cereal-height,General Mills,C,130,3
2007,cereal-nine,Ralston Purina,C,90,2
2007,cereal-ten,Post,C,90,3
2007,cereal-eleven,Quaker Oats,C,120,1
2008,cereal-twelve,General Mills,C,100,6
2008,cereal-thirteen,General Mills,C,124,1
2008,cereal-fourteen,General Mills,C,110,3
2008,cereal-fifteen,General Mills,C,110,1
2008,cereal-sixteen,Ralston Purina,C,100,1
2009,cereal-seventeen,Kelloggs,C,100,2
2009,cereal-heighteen,Kelloggs,C,108,1
2009,cereal-nineteen,General Mills,C,114,1
通过改变一些事情,我成功地做到了我想做的事情,首先我通过Cyril注释将日期转换为数字,并在.onslide函数中更改了顺序以使事情正常进行。这就是我现在的代码:
d3.csv("cereal.csv", function(error, data) {
var dateSlider = d3.select('#slider')
.call(d3.slider().axis(true).min(2006).max(2009).step(1)
.on("slide", function(evt, value) {
console.log(value);
dots.each(function(d) {
this.style.display = value != d.Date ? "none" : "inline";
});
})
);
// change string (from CSV) into number format
data.forEach(function(d) {
d.Calories = +d.Calories;
d.Protein = +d.Protein;
d.Date = +d.Date;
});
// don't want dots overlapping axis, so add in buffer to data domain
xScale.domain([d3.min(data, xValue)-1, d3.max(data, xValue)+1]);
yScale.domain([d3.min(data, yValue)-1, d3.max(data, yValue)+1]);
// x-axis
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis)
// y-axis
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
// draw dots
var dots = svg.selectAll(".dot")
.data(data)
.enter().append("circle")
.attr("class", "dot")
.attr("r", 7)
.attr("cx", xMap)
.attr("cy", yMap)
.style("fill", "steelblue")
.on("mouseover", function(d) {
console.log(d.Date);
});
您还需要将日期转换为数字数据;Thx,这样做了,但它没有改变任何事情。。。