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

我使用from dc.js刷散点图

我创建了一个下拉菜单，选项是不同维度的组合；比如x，y，x，z，y，z：

但是在我选择不同的维度后，scatteplot中的值不会改变

在从下拉列表中选择一个选项后，如何在现场更改散点图的值

---

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

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

$('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);
      });

---

这是正确的，尽管这个函数做的比它需要做的更多。我认为它真正需要做的是为图表指定一个新维度并重新渲染图表，而不是重建整个交叉过滤器和所有图表。@EthanJewett是的，将交叉过滤器数据保留在wrap函数之外会更有效。如果可以的话，我会重新看的，谢谢你，不用担心，一切都很好。谢谢你的回答！

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

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