Wie mache ich einen Drop-Down-Filter in meiner Visualisierung?

Question

Ich würde gerne einen Dropdown-Filter in meiner Visualisierung zu implementieren, die mich nach bestätigten Präsidenten filtern können. Da ich aber sehr neu bei d3 bin, habe ich wirklich Probleme. Ich habe versucht, es mit Code zu implementieren, den ich anderswo gefunden habe, aber ohne Erfolg.

  var dataPath = "data/p.csv"; 
      var dataPath2 = "data/e.csv"; 
      var field1=[]; 
      var field2=[]; 

      d3.csv(dataPath2,function(data){ 
         data.map(function(d){ 
          field1.push(d.year); 
          field2.push(d.publication); 
         }) 
         //called after the AJAX is success 
         console.log("field1",field1); 
         console.log("field2",field2); 
         console.log("field1",field1[0]); 

var myData = data; 
var margin = 150, 
    width = 1000 - margin, 
    height = 2000 - margin; 

/* 
* value accessor - returns the value to encode for a given data object. 
* scale - maps value to a visual display encoding, such as a pixel position. 
* map function - maps from data value to display value 
* axis - sets up axis 
*/ 

// setup x 
var yValue = function(d) { return d.publication;}, // data -> value 
    yScale = d3.scale.ordinal().domain(field2).rangePoints([height, margin]); // value -> display 
    yMap = function(d) { return yScale(yValue(d));}, // data -> display 
     yAxis = d3.svg.axis().scale(yScale).orient("left"); 

// setup y 
var xValue = function(d) { return d.year;}, // data -> value 
     xExtent = d3.extent(data, function(d) { 
      return d.year; 
      }); 
    xScale = d3.scale.linear().domain(xExtent).range([0,width-200]), // value -> display 
    xMap = function(d) { return xScale(xValue(d));}, // data -> display 
    xAxis = d3.svg.axis().scale(xScale).orient("bottom"); 
    // 




// 
// // setup fill color 
var cValue = function(d) { return d.endorsed;}, 
    color = d3.scale.category10(); 
// 
// // add the graph canvas to the body of the webpage 
var svg = d3.select("body").append("svg") 
    .attr("width", width + margin) 
    .attr("height", height + margin) 
    .append("g") 
    .attr("transform", "translate(150)"); 

// add the tooltip area to the webpage 
var tooltip = d3.select("body").append("div") 
    .attr("class", "tooltip") 
    .style("opacity", 0); 


    // x-axis 
    svg.append("g") 
     .attr("class", "x axis") 
     .attr("transform", "translate(0," + height + ")") 
     .call(xAxis 
     .ticks(12)) 
    .append("text") 
     .attr("class", "label") 
     .attr("x", width-200) 
     .attr("y", -6) 
     .style("text-anchor", "end") 
     .text("Year"); 
// 
// // y-axis 
    svg.append("g") 
     .attr("class", "y axis") 
     .call(yAxis 
     .ticks(50)) 
    .append("text") 
     .attr("class", "label") 
     // .attr("transform", "rotate(-90)") 
     .attr("y", 6) 
     .attr("dy", ".71em") 
     .style("text-anchor", "end") 
     .text("Publication"); 

    // draw dots 
    svg.selectAll("circle") 
     .data(data) 
    .enter().append("circle") 
     .attr("class", "dot") 
     .attr("r", 4) 
     .attr("x", width - 10) 
     .attr("y", 95) 
     .attr("cx", xMap) 
     .attr("cy", yMap) 
     .style("fill", function(d) { return color(cValue(d));}) 

      // if (d.endorsed == "Clinton") { return "red"} 
      // else {return "black"}; }) 
     .on("mouseover", function(d) { 
      tooltip.transition() 
       .duration(1000) 
       .style("opacity", .9); 
      tooltip.html(d.endorsed 
      ) 
       .style("left", (d3.event.pageX + 5) + "px") 
       .style("top", (d3.event.pageY - 28) + "px"); 
     }) 
     .on("mouseout", function(d) { 
      tooltip.transition() 
       .duration(1000) 
       .style("opacity", 0); 
     }); 

    // draw legend 
    var legend = svg.selectAll(".legend") 
     .data(color.domain()) 
    .enter().append("g") 
     .attr("class", "legend") 
     .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; }); 

    // draw legend colored rectangles 
    legend.append("rect") 
     .attr("x", width - 10) 
     .attr("y", 95) 
     .attr("width", 10) 
     .attr("height", 10) 
     .style("fill", color); 

    // draw legend text 
    legend.append("text") 
     .attr("x", width - 24) 
     .attr("y", 100) 
     .attr("dy", ".35em") 
     .style("text-anchor", "end") 
     .text(function(d) { return d;}) 
}); 

Answer 1

hatte ich eine ähnliche Anforderung, die ich with help of others lösen konnte, aber Sie werden als nur d3 mehr benötigen. Sehen Sie sich JQuery an, um Dropdown-Optionen zu erstellen, und Sie können Ihre Daten basierend auf Auswahlen filtern.