Question

我对D3比较新，并且一直有一些问题开始。我使用下面的代码创建了一个下拉菜单

var signal = d3.select('#signal_container');
var signalName = ["Please Select", "Temperature", "Pressure", "Load"];
var signalSelect = signal
    .append('select')
    .attr('class', 'select')
    .attr('multiple', '');
var signalOptions = signalSelect
    .selectAll('option')
    .data(signalName).enter()
    .append('option')
    .text(function (d) { return d; });

我想知道是否有办法限制用户可以在多选下拉菜单中选择的选项数量？假设我想将限制设置为2并且他们选择了“温度”和“加载”，如果他们尝试选择“压力”则不可能，因为所选选项的限制设置为2。 / p>

另外，我如何获得所选选项的值？我正在使用

d3.select('#signal_container').select('select').property('value');

但显然这只是获得第一个选择选项的价值。

提前感谢您的帮助

Answer 1

有许多方法可以通过编程方式完成您的工作。这是一个这样的实现，它在选项的click事件中处理选项的启用/禁用：

<!DOCTYPE html>
<html>

<head>
  <script data-require="d3@4.0.0" data-semver="4.0.0" src="https://d3js.org/d3.v4.min.js"></script>
</head>

<body>
  <div id="signal_container"></div>
  <br/>
  <button id="someButton">Get Values!</button>
  <script>
    var signal = d3.select('#signal_container');
    var signalName = ["Please Select", "Temperature", "Pressure", "Load"];
    var signalSelect = signal
      .append('select')
      .attr('class', 'select')
      .attr('multiple', '');

    var selectedValues = [];
    var signalOptions = signalSelect
      .selectAll('option')
      .data(signalName).enter()
      .append('option')
      .text(function(d) {
        return d;
      })
      .on('click', function(d) {
        var s = signalOptions.filter(function(d) {
          return this.selected;
        });
        if (s.nodes().length >= 2) {
          signalOptions.filter(function() {
              return !this.selected
            })
            .property('disabled', true);
        } else {
          signalOptions.property('disabled', false);
        }
      });

    d3.select('#someButton')
      .on('click', function(d) {
        var v = signalOptions.filter(function(d) {
          return this.selected;
        }).data();
        alert(v);
      });
  </script>
</body>

</html>

FOR COMMENTS

<!DOCTYPE html>
<html>

<head>
  <script data-require="d3@4.0.0" data-semver="4.0.0" src="https://d3js.org/d3.v4.min.js"></script>
</head>

<body>
  <div id="signal_container"></div>
  <br/>
  <button id="someButton">Get Values!</button>
  <script>
    var signal = d3.select('#signal_container');
    var signalName = ["Please Select", "Temperature", "Pressure", "Load"];
    var signalSelect = signal
      .append('select')
      .attr('class', 'select')
      .attr('multiple', '')
      .on('change', function(d) {
        var s = signalOptions.filter(function(d) {
          return this.selected;
        });
        if (s.nodes().length >= 2) {
          signalOptions.filter(function() {
              return !this.selected
            })
            .property('disabled', true);
        } else {
          signalOptions.property('disabled', false);
        }
      });

    var selectedValues = [];
    var signalOptions = signalSelect
      .selectAll('option')
      .data(signalName).enter()
      .append('option')
      .text(function(d) {
        return d;
      });

    d3.select('#someButton')
      .on('click', function(d) {
        var v = signalOptions.filter(function(d) {
          return this.selected;
        }).data();
        alert(v);
      });
  </script>
</body>

</html>

限制用户在D3下拉菜单中可以选择的选项数量

1 个答案: