javascript - 如何使用 d3 扩展 select 标签中的选项数量？

Question

考虑一个 select html 标签，我只使用一个选项作为标题或占位符。

我正在使用 d3.js 来呈现 html View 并根据数据向该标签添加新元素或选项。根据不同的数据集，这会发生很大变化。这就是我使用这种方法的原因。

但是，此方法不会返回数据中的第一个选项或第一个元素，如您在代码片段示例中所见。在此示例中，我有三个主要键:a、b 和 c。它只是添加了其中两个。

如果我在 html View 中删除第一个选项，它就可以正常工作。那么，扩展新选项以选择标签的最佳方式是什么？

为了添加新的，我使用了这段代码:

Object.keys(data).map((k) => {
  if (k == 'a') {
    options.push(k)
    options.push(k)
  } else {
    options.push(k)
  }
}) 

但是，这意味着知道第一个元素是什么，而在大多数情况下这不是真的。

我怎样才能达到这个结果？

var data = {
  'a': {
    'aa': 'aa'
  },
  'b': {
    'bb': 'bb'
  },
  'c': {
    'cc': 'cc'
  }
}

var options = []
Object.keys(data).map(function (k) {
  options.push(k)
})

var selector = d3.select('#myid')
var opts = selector.selectAll('option')
    .data(options.sort())
    .enter()
    .append('option')
    .attr('value', function (d) {
      return d
    })
    .text(function (d) {
      return d
    })

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<select id='myid' name='name' class='form-control'>
  <option disabled selected>Select one item</option>
</select>

Answer 1

相反，selectAll option 传递 null。

var opts = selector.selectAll(null)

var data = {
  'a': {
    'aa': 'aa'
  },
  'b': {
    'bb': 'bb'
  },
  'c': {
    'cc': 'cc'
  }
}

var options = []
Object.keys(data).map(function (k) {
  options.push(k)
})

var selector = d3.select('#myid')
var opts = selector.selectAll(null)
    .data(options.sort())
    .enter()
    .append('option')
    .attr('value', function (d) {
      return d
    })
    .text(function (d) {
      return d
    })

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<select id='myid' name='name' class='form-control'>
  <option disabled selected>Select one item</option>
</select>