Question

我想在简单的散点图中使用滑块（d3-slider）过滤csv中的数据。

我的问题是过滤器有点无政府主义。当我使用滑块时，它会显示点而不是我想要的点。

我尝试this但最后修改了that code。

这是我的代码片段，问我是否需要所有代码：

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

Answer 1

我设法做了我想要的改变一些事情，首先我将Date转换为数字（感谢Cyril评论）并改变了我的 .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) {
        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);
      });

从散点图D3js中的滑块过滤csv数据

1 个答案: