使用d3中的下拉列表替换单选按钮时遇到问题

Question

我的代码如下所示， 它有一些控制[一些无线电和下拉]我想要更换无线电。

单选按钮和下拉列表填充。我想更换收音机。但是更改函数采用区域参数 - 它适用于无线电，但不适用于下拉列表。我无法弄清楚它是如何传入单选按钮的[但它确实如此]。并且它不会传入下拉列表。为什么？？？ ： - （

var dropDown = d3.select("#custs")
        .append("div")
        .append("select")
        .attr("name", "cust-list");



  var regionsByFruit = d3.nest()
                .key(function (d) { return d.fruit; })
                .entries(data)
                .reverse();

  var options = dropDown.selectAll("option")
                .data(regionsByFruit)
                .enter()
                .append("option");


  options.append("option")
                .attr("name", "fruit")
                .attr("value", function (d) { return d.key; })
                .text(function (d) { return d.key })

                .filter(function (d, i) { return !i; });

   dropDown.on("change", change);

   //radio buttons
   var label = d3.select("#custs").selectAll("label")
               .data(regionsByFruit)
               .enter()
              .append("div").append("label");

   label.append("input")
                .attr("type", "radio")
                .attr("name", "fruit")
                .attr("value", function (d) { return d.key; })
                .on("change", change)
                .filter(function (d, i) { return !i; })
                .each(change)
                .property("checked", true);

    // adds the labels to the radio buttons
    label.append("span")
                .text(function (d) { return d.key; });


     function change(region) {
                var data0 = path.data(),
                    data1 = pie(region.values);




                var arc = d3.svg.arc().outerRadius(radius - 40)
                    .innerRadius(radius - 40);


                path = path.data(data1, key);
                text = text.data(data1, key);


                path.enter()
                    .append("path")
                    .each(function (d, i) { this._current = findNeighborArc(i, data0, data1, key) || d; })
                    .attr("id", function (d) { return d.ID })
                    .attr("fill", function (d) { return color(d.data.region); })
                    .append("svg:title")
                    .text(function (d, i) { return "Account: " + d.data.region; });
                //.on("mouseover", function (d) { tip.show(d, document.getElementById(d.ID)) })
                //.on('mouseout', tip.hide);


                text.enter()
                .append("text")
                .attr("transform", function (d) { return "translate(" + arc.centroid(d) + ")"; })
                    .attr("dy", ".35em")
                    .attr("stroke", "white")
                    .style("text-anchor", "middle")
                    .text(function (d, i) {
                        return d.data.count;
                        console.log("CNT " + d.data.count)
                    });

                path.exit()
                    .datum(function (d, i) { return findNeighborArc(i, data1, data0, key) || d; })
                  .transition()
                    .duration(750)
                    .attrTween("d", arcTween)
                    .remove();

                path.transition()
                    .duration(750)
                    .attrTween("d", arcTween);


            }
        });
    }

    function key(d) {
        return d.data.region;
    }