Question

这是我的d3 js图形代码，其中我附加了两个不同的select选项，它给了我相同的值。我认为两个选择选项彼此重叠或者我的html代码存在问题。

<div id="chart" style="width:100%;height:100%;padding:0">
  <div>
    <select id="select-list">
      <option value="Line">Line</option> 
      <option value="Bar">Bar</option>
      <option value="Area">Area</option>
    </select>
  </div>
  <div id="noDataMsg" style="text-align: center;display:none">
    <h5> No Data Available For This Period </h5>
  </div>
</div>

上面是html代码，其中我在div中附加两个选择选项，id为'chart'。下面是d3 js图代码

var all_data = [{
  'name': 'Daily',
  'data': day_data
}, {
  'name': 'Weekly',
  'data': week_data
}, {
  'name': 'Monthly',
  'data': month_data
}, {
  'name': 'Quartely',
  'data': quater_data
}, {
  'name': 'HalfYearly',
  'data': halfyearly_data
}, {
  'name': 'Yearly',
  'data': yearly_data
}];

var select = d3.select("#chart")
  .append('select')
  .attr('class', 'select')
  .on('change', onchange)

var options = select
  .selectAll('option')
  .data(all_data).enter()
  .append('option')
  .attr("value", function(d) {
    d.data
  })
  .text(function(d) {
    return d.name
  });

function onchange() {
  var section = d3.select('select').property('value');
  var GraphType = jq('#select-list').val();
}

在上面的代码中，我在onChange函数中获得了不同select选项的相同值（即section的值和Graph类型相同）。我不知道为什么？

Answer 1

问题似乎是

 d3.select('select')

选择页面上的第一个<select>元素，该元素恰好是ID为select-list的元素，因此与jq("#select-list")选择的元素相同。

你可能打算写

  var section = select.property('value');

鉴于您的本地变量select具有包含第二个<select>元素的D3选择。或者，由于此<select>包含课程select，您可以使用以下内容（请注意.中的'.select'）：

  var section = d3.select('.select').property('value');

Answer 2

我面临的问题是由于我的愚蠢错误，因为我忘记区分两个选择选项与他们的ID和类

首先使用id

 <select id="select-list">

第二课

var select = d3.select("#chart")
  .append('select')
  .attr('class', 'select')
  .on('change', onchange)

在我的代码中如下所示

 <select class="select">

我面对此代码所面临的问题

 var section = d3.select('select').property('value');
  var GraphType = jq('#select-list').val();

我必须用来区分class和id的唯一更正是

  var section = d3.select('.select').property('value');
      var GraphType = jq('#select-list').val();

从不同的选择选项中获取相同的值

2 个答案: