Zwróć dane w oparciu o menu rozwijane?

Question

Buduję podstawową działkę rozproszeniową, w której chcę wyróżnić określone punkty na mojej działce w oparciu o listę rozwijaną. Mój kod wygląda następująco:

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

Mój problem polega na tym, że nie wiem, jak określić, co użytkownik wybrał z rozwijanego menu. Jak mogę określić, która opcja została wybrana przez użytkownika?

Answer 1

niego dostęp za pomocą 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"} 
     ;}) 
});