score:1

Accepted answer

There are a few ways to solve this problem, but I think the easiest is to store the current values in a variable that both the select element change listeners and any code that needs it (e.g. updateSubset) can access. Here is a simple example:

// 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>

I don't know how your whole script looks, but you could do something similar:

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)

[ ... ]

or you can also pass in current if you want to control the scope more tightly:

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

Related Query