散布図のスライダーからのcsvデータをフィルタリングするD3js

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

私はいくつか変更して欲しかった何をするために管理物事は、最初に私が数（シリルコメントのおかげで）に日付を変換し、物事が仕事を得るために私.on（「スライド」）機能の順序を変更しました。それは今、私のコードです：

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); 
     });