зависимая фильтрация с двумя выпадающими jquery

Question

У меня есть два выпадающих меню.Один раскрывающийся список (содержащий количественные переменные) определяет размер кружков, а другой раскрывающийся список (содержащий категориальные переменные), который определяет цвет круга, созданного на карте листовки.Когда я выбираю переменную размера, я хочу, чтобы переменная цвета была зафиксирована в той переменной, которую он выбрал ранее.«sizeropdown» и «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]);}
    );
}

Я не мог понять, как сохранить выбор одного фильтра, когда другой меняется.

Answer 1

Существует несколько способов решения этой проблемы, но я думаю, что проще всего сохранить текущие значения в переменной, к которой могут обращаться как слушатели изменения элемента select, так и любой код, который нуждается в этом (например, updateSubset).Вот простой пример:

// all functions in this script can access `current`
var current = {
  colour: 'schemeBlues',
  size: '30'
}

// when the select element changes, set the current value of `this.name`
// (i.e. either current.colour or current.size) to `this.value`
// `this` is the element that triggered the event
function changeListener () {
  current[ this.name ] = this.value

  // print out current values
  d3.select('#result')
    .append('p')
    .text('Colour: ' + current.colour + '; size: ' + current.size)
}

// add a select element with `arr` as the option items and `name` as 
// the select element id and name
function addCntrl ( arr, name ) {
  // add a select element
  var cntrl = d3.select('#controls')
    .append('select')
    .attr('name', name )
    .attr('id', name )

  cntrl.selectAll('option')
  .data( arr )
    .enter()
    .append( 'option' )
    .attr('value', d => d.value )
    .text( d => d.name )

  // set the selected value to current[name] (i.e. current.colour or current.size)
  cntrl.property('value', current[name])

  cntrl.on('change', changeListener)
}

function init() {
  var colours = Object.keys(d3)
      .filter( function(c){ return (c.indexOf('scheme') !== -1) })
      .map( function(c) {
          return {
            value: c,
            name: c.replace('scheme','')
                   .replace(/(\D)(\d)/, '$1 $2')
          }
        } ),
  sizes = [ '10', '20', '30', '40', '50' ].map( e => { return { value: e, name: e } } )

  // add select elements to the page
  addCntrl(colours, 'colour')
  addCntrl(sizes, 'size')
  
}


init()

<script src="http://d3js.org/d3.v5.js"></script>
<div id="controls"></div>
<div id="result"></div>

Я не знаю, как выглядит весь ваш сценарий, но вы могли бы сделать что-то подобное:

var current = {
  color: 'blue',
  size: 'super_massive'
}

function updateSubset( subset ) {
  var section_size = current.size,
  section_color = current.color
  [ ... ]

}

function selectChanged() {
  current[this.name] = this.value;
  updateSubset( all_data.features )
}

[ ... ]

// make sure that both select elements have their `name` attribute set, then:
d3.select('#sizeSection')
  .on('change', selectChanged)
d3.select('#colorSection')
  .on('change', selectChanged)

[ ... ]

или вы также можете передатьв current, если вы хотите более точно контролировать прицел:

function updateSubset( subset, opts ) {
  var section_size = opts.size,
  section_color = opts.color
  [ ... ]

}

[ ... ]

function selectChanged() {
  current[this.name] = this.value;
  updateSubset( all_data.features, current )
}