将 D3.js 创建的下拉菜单交换为 HTML 创建的下拉菜单

Question

在这段代码中（基于这个例子How to make the circles disappear based on keyboard input?），我可以点击下拉菜单的数字，让圆圈消失。

var data = [10,20,30,40,50,60,70,80,90,100];

var color = d3.schemeCategory10; // color array built in

//// Add the select and options:
var select = d3.select('body')
  .append('select')
  .on('change',function() { update(this.value) });

var start = select.append('option')
  .html("select: ");

var options = select.selectAll('.option')
  .data(data)
  .enter()
  .append('option')
  .attr('class','option')
  .attr('value',function(d,i) { return i; })
  .html(function(d) { return d; });



//// Add the circles (and svg)
var svg = d3.selectAll('body')
  .append('svg')
  .attr('width',500)
  .attr('height',200);

var circles = svg.selectAll('circle')
  .data(data)
  .enter()
  .append('circle')
  .attr('cx',function(d,i) { return i * 30 + 50; })
  .attr('cy',50)
  .attr('r',10)
  .attr('fill',function(d,i) { return color[i]; });


// Update everything:
function update(i) {
  data.splice(i,1); // remove that element.

  // Update and remove option from the select menu:
  options.data(data).exit().remove();

  // Remove that circle:
  circles.data(data).exit().remove(); 

  circles.attr('cx',function(d,i) { return i * 30 + 50; })
    .attr('fill',function(d,i) { return color[i]; });

  // reset the select menu:
  start.property('selected','selected');
}

在上面的代码中，下拉菜单仅使用 D3.js 创建，没有 HTML。

现在我想使用具有相同行为但由 HTML 创建的下拉菜单，所以我将代码稍微更改为：

 <select id = "opts">
    <option value="ds1">1</option>
    <option value="ds2">2</option> 
    <option value="ds3">3</option>

      </select> 
    <script>
    var data = [10,20,30,40,50,60,70,80,90,100];

    var color = d3.schemeCategory10; // color array built in

   var select = d3.select('#opts')
  .append('select')
  .on('change',function() { update(this.value) });

    //// Add the circles (and svg)
    var svg = d3.selectAll('body')
      .append('svg')
      .attr('width',500)
      .attr('height',200);

    var circles = svg.selectAll('circle')
      .data(data)
      .enter()
      .append('circle')
      .attr('cx',function(d,i) { return i * 30 + 50; })
      .attr('cy',50)
      .attr('r',10)
      .attr('fill',function(d,i) { return color[i]; });


    // Update everything:
    function update(i) {
      data.splice(i,1); // remove that element.

      // Update and remove option from the select menu:
      options.data(data).exit().remove();

      // Remove that circle:
      circles.data(data).exit().remove(); 

      circles.attr('cx',function(d,i) { return i * 30 + 50; })
        .attr('fill',function(d,i) { return color[i]; });

      // reset the select menu:
      start.property('selected','selected');
    }

不幸的是，它不起作用。有人可以帮助并给我一个提示，缺少什么？

谢谢

Answer 1

由于您是在 HTML 中创建下拉菜单，因此您无需使用 D3 附加任何内容。

因此，放下这个：

var select = d3.select('#opts')
    .append('select')
    .on('change',function() { update(this.value) });

只需在下拉列表中添加一个事件监听器：

d3.select("#opts").on("change", function() {
    //code here
});

这是一个演示：

d3.select("#opts").on("change", function() {
  console.log(this.value)
});

<script src="https://d3js.org/d3.v4.min.js"></script>
<select id="opts">
  <option>Please select</option>
  <option value="ds1">1</option>
  <option value="ds2">2</option>
  <option value="ds3">3</option>
</select>