如何在从下拉列表中选择选项时更改视图数据,而不必刷新页面?

解决此问题的一种方法是将代码封装在函数中,并在上调用该函数 $('#select').change(function() {//call function here})

function wrap(val1, val2) {

  ...

  var ndx = crossfilter(data),
      dim1 = ndx.dimension(function (d) {
          return [+d[val1], +d[val2]];
      }),
      group1 = dim1.group(),
  chart1.width(300)
      .height(300)
      .x(d3.scaleLinear().domain([0, 20]))
      .y(d3.scaleLinear().domain([0, 20]))
      .yAxisLabel(val2)
      .xAxisLabel(val1)
      .clipPadding(10)
      .dimension(dim1)
      .excludedOpacity(0.5)
      .group(group1);

  ...

}

然后在第一次加载页面时调用此函数一次,然后在下拉菜单中每次更改后调用:

$('select').val("xy").change(); // change the value in the dropdown on the first load   
var val1 = "x", val2 = "y";

$('#select').change(function() {
          var val = $(this).dropdown('get value');
          if(val === "xz") {
            val1 = "x",
            val2 = "z";
          }
          if(val === "yz") {
            val1 = "y",
            val2 = "z";
          }
          if(val === "xy") {
            val1 = "x",
            val2 = "y";
          }

          wrap(val1, val2);
      });

Fiddle