javascript - 从下拉列表中选择选项时如何更改 View 数据，而无需刷新页面？

Question

我正在使用this example从 dc.js 绘制散点图。

我创建了一个下拉菜单，其中的选项是不同维度的组合；如(x,y)、(x,z)、(y,z):

<select name="axes" class="ui dropdown" id="select">
    <option value="">Select Axes</option>
    <option value="xy">(x,y)</option>
    <option value="xz">(x,z)</option>
    <option value="yz">(y,z)</option>
</select>

现在，每次我从下拉列表中选择一个选项时，我都希望散点图中的值根据我选择的维度进行更改。我尝试了以下代码:

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

var ndx = crossfilter(data),
    dim1 = ndx.dimension(function (d) {
        return [+d[val1], +d[val2]];
    });

但是在我选择不同的维度后，散点图的值不会改变。

从下拉列表中选择一个选项后，如何使散点图的值“当场”更改？

Running Fiddle

Answer 1

解决此问题的一种方法是将代码包装在函数内，然后在 $('#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