根據下拉菜單返回數據？

Question

我正在構建一個基本散點圖，我想根據下拉選擇來突出顯示我的繪圖中的特定點。我的代碼如下所示：

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

我的問題是我不知道如何確定用戶從下拉列表中選擇了什麼。我如何確定用戶選擇了哪個選項["A", "B", "C", "D"]？它使用this.selectedIndex

Answer 1

訪問：

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