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

在这个基于这个例子的代码中，我可以点击一些下拉菜单，让圆圈消失

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

不幸的是，它没有起作用。谁能帮我个忙，给我一个提示，缺什么

---

谢谢

因为您正在HTML中创建下拉列表，所以不需要使用D3追加任何内容

因此，放下这个：

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

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

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

下面是一个演示：

d3.selectopts.onchange，函数{ console.logthis.value }; 请选择 1. 2. 3.

---

你好，杰拉尔多，和你在一起总是很愉快。答案总是切中要害的。代码运行良好，非常感谢。在旧代码中，可以更新下拉菜单的条目：options.datadata.exit.remove；但在你的解决方案中，它不再是。你有解决办法吗？是的，这是可能的。但是，同样，由于这是另一个问题，请发布另一个问题！标题可以是用D3或类似的东西更新HTML下拉列表。我有一个政策：每个问题只有一个问题：这对OP也有好处：如果你在评论中问另一个问题，我是唯一一个阅读它的人。但如果你把它当作一篇新文章来问，每个人都会读的。