Javascript 具有两个jquery下拉列表的相关筛选

我有两个下拉菜单。一个包含定量变量的下拉列表决定圆圈的大小，另一个包含分类变量的下拉列表决定传单地图上创建的圆圈的颜色。当我选择“大小变量”时，我希望颜色变量固定为他先前选择的变量。sizedropdown和colordropdown包含变量名称，sizeExtents包含量化变量的最小值和最大值，colorextent包含唯一类别

var dropDown_size = d3.select("#sizeSection")
    .selectAll("option").data(sizedropDown)
    .enter().append("option")
    .text(function(d) {return d ;} )
    .attr("value", function(d,i) { return i;} );

var dropDown_color = d3.select("#colorSection")
    .selectAll("option").data(colordropDown)
    .enter().append("option")
    .text(function(d) { return d;} )
    .attr("value", function(d,i) {return i;} );

d3.select('#sizeSection')
  .on("change", function () {
      var section_color = 0;
      var sect_size = document.getElementById("sizeSection");
      var section_size = sect_size.options[sect_size.selectedIndex].value;
      updateSubset(all_data.features,section_size,section_color);
  });

d3.select('#colorSection')
  .on("change", function () {
      var section_size = 0;
      var sect_color = document.getElementById("colorSection");
      var section_color = sect_color.options[sect_color.selectedIndex].value;
      updateSubset(all_data.features,section_size,section_color);
  });

我的updateSubset函数在地图上工作。更新子集函数如下所示：

function updateSubset(subset,section_size,section_color) {

    var size_name = sizedropDown[section_size];
    var size_extent = sizeExtents[section_size];
    var sizeScale = d3.scale.sqrt()
        .domain(size_extent)
        .range([5,15]);

    var color_name = colordropDown[section_color]
    var color_extent = colorExtents[section_color];
    var c10 = function(d){
        var colors = ["#3366cc", "#dc3912", "#ff9900", "#109618", "#990099",
                      "#0099c6", "#dd4477", "#66aa00", "#b82e2e", "#316395",
                      "#994499", "#22aa99", "#aaaa11", "#6633cc", "#e67300",
                      "#8b0707", "#651067", "#329262", "#5574a6", "#3b3eac"];
        return  colors.slice(0,d)};
    var ordinalScale = d3.scale.ordinal()
        .domain(color_extent)
        .range(c10(color_extent.length));

    var bounds = path.bounds({
        type: "FeatureCollection",
        features: subset
    });
    var topLeft = bounds[0];
    var bottomRight = bounds[1];
    var arc = d3.svg.symbol().type('circle');

    svg.attr("width", bottomRight[0] - topLeft[0])
       .attr("height", bottomRight[1] - topLeft[1])
       .style("left", topLeft[0] + "px")
       .style("top", topLeft[1] + "px");

    g.attr("transform", "translate(" + -topLeft[0] + "," + -topLeft[1] + ")");

    var points = g.selectAll("path")
        .data(subset,function(d){return d.geometry.coordinates;});

    points.enter().append("path");
    points.attr("d", path).attr("class", "points");
    points.attr("d",path.pointRadius(function(d) {
        return sizeScale(d.properties[size_name]);})
    );
    points.style("fill-opacity", 0.4);
    points.style("fill", function(d){
        return ordinalScale(d.properties[color_name]);}
    );
}

---

我不明白在另一个过滤器发生变化时如何存储对一个过滤器的选择。

有几种方法可以解决这个问题，但我认为最简单的方法是将当前值存储在一个变量中，选择元素的变化监听器和任何需要它的代码（例如updateSubset）都可以访问该变量。下面是一个简单的例子：

//此脚本中的所有函数都可以访问“current”` 无功电流={ 颜色：“schemeBlues”， 尺码：'30' } //当select元素更改时，将当前值设置为`this.name'` //即当前颜色或当前大小为'this.value'` //`this`是触发事件的元素 函数更改侦听器{ 当前[this.name]=this.value //打印当前值 d3.选择“结果” .附加“p” .text'color:'+current.color+'；size:'+current.size } //添加一个select元素，选项项为'arr'，选项项为'name' //选择元素id和名称 函数addCntrl arr，name{ //添加一个select元素 变量cntrl=d3。选择“控制” .附加'select' .attr'name'，name .attr'id'，名称 cntrl.选择全部“选项” .数据传送 进来 .附加“选项” .attr'value'，d=>d.value .text d=>d.name //将所选值设置为当前[名称]，即当前颜色或当前大小 cntrl.property'value'，当前[名称] 关于“更改”，changeListener } 函数初始化{ var colors=Object.keyd3 .filter函数c{返回c.indexOf'scheme'！=-1} .地图功能C{ 返回{ 值：c， 名称：c.替换“方案”， .replace/\D\D/，“$1$2” } } , 大小=['10'，'20'，'30'，'40'，'50'].映射e=>{return{value:e，name:e} //将select元素添加到页面中 添加颜色，“颜色” 添加CntrLsize，“大小” } 初始化

---

为什么不让变量var section\u color=0；var截面尺寸=0；全局，在更改回调中更改其中的值并调用更新函数为什么要更改路径的d属性两次？非常感谢！！你解释的方式太棒了。