Restituisci i dati in base al menu a discesa?

Question

Sto costruendo una trama di dispersione di base in cui vorrei evidenziare punti specifici nella mia trama basata su una selezione a discesa. Il mio codice è simile al seguente:

fill_arr = fill.range(); 
labels = ["A", "B", "C", "D"]; 
options = [0, 1, 2, 3]; 

// Build the dropdown menu 
d3.select("#drop") 
    .append("select") 
    .selectAll("option") 
    .data(options) 
    .enter() 
    .append("option") 
    // Provide available text for the dropdown options 
    .text(function(d) {return labels[d];}) 

d3.select('select') 
    .on("change", function() { 
    // HOW CAN I GET THE OPTION THAT THE USER HAS SELECTED FROM THE DROPDOWN? 
    key = 0 // <- I can do this manually, but I want to get the label the user has selected 
    d3.selectAll('circle') 
     .transition() 
     .duration(300) 
     .ease("quad") 
     .attr('r', 5) 
     .attr('cx', function(d) {return d.x;}) 
     .attr('cy', function(d) {return d.y;}) 
     // if a data point is selected highlight other 
     // data points of the same color 
     .style('fill', function(d, i) { 
      if (d.label == key) 
      {return fill_arr[key]} 
      else {return "#ccc"} 
     ;}) 
    }); 

Il mio problema è che non so come determinare ciò che l'utente ha selezionato dal menu a discesa. Come posso determinare quale opzione, ["A", "B", "C", "D"] l'utente ha selezionato?

Answer 1

accesso utilizzando this.selectedIndex:

d3.select('select') 
    .on("change", function() { 

    key = this.selectedIndex; 

    d3.selectAll('circle') 
     .transition() 
     .duration(300) 
     .ease("quad") 
     .attr('r', 5) 
     .attr('cx', function(d) {return d.x;}) 
     .attr('cy', function(d) {return d.y;}) 
     // if a data point is selected highlight other 
     // data points of the same color 
     .style('fill', function(d, i) { 
      if (d.label == key) 
      {return fill_arr[key]} 
      else {return "#ccc"} 
     ;}) 
});