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

Question

我正在使用 dc.js 中的 this example 来刷散点图。

我创建了一个下拉菜单，选项是不同维度的组合；像 (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]];
    });

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

从下拉列表中选择一个选项后，如何更改散点图的值 "on the spot"？

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

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

How to change view data when selecting option from dropdown, without having to refresh the page?

javascript

crossfilter

dc.js