드롭 다운 메뉴를 기반으로 데이터를 반환 하시겠습니까?

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