Question

我想将选项添加到选择组合框中，例如我有

之类的数据

[{ "NAME": "JONE", "ID": {"id1":123,"id2":124}}, { "NAME": "ANGEL", "ID": {"id1":125,"id2":127}}]`

我想在选项中附加＆＃34;名称＆＃34;，到目前为止我已经这样做了：

dataset=d3.json("namees.json", function(data) {
    select = d3.select('body')
    .append('select')
    .attr('class','style');
    options = select
    .selectAll('option')


    .append('option')
            .text(data.forEach(function (d) {return d.Name}))



});

但它没有显示选择选项

中的值

Answer 1

您可以执行以下操作：

附加select元素

 var dropDown = d3.select("body").append("select")
    .attr("name", "name-list");

根据数据

将options附加到select元素

var options = dropDown.selectAll("option")
 .data(data)
 .enter()
 .append("option");

为您的选项设置text和value

options.text(function(d) {
return d.NAME;
 })
   .attr("value", function(d) {
return d.NAME;
});

JSFiddle - https://jsfiddle.net/x4a8ejk6/

Answer 2

<块引用>

数据

[0, 1, 5, 7]

<块引用>

Javascript

let data = [{
  NAME: "JONE",
   ID: {
   "id1": 123,
   "id2": 124
  }
  }, {
  NAME: "ANGEL",
    ID: {
     "id1": 125,
"id2": 127
      }
}];

<块引用>

HTML 代码

    let selector = d3.select("#selDataset");
    let sampleNames = data.map(ele =>ele.NAME);
            
    sampleNames.forEach((sample) => {
        selector
            .append("option")
            .text(sample)
            .property("value", sample);
    });

<块引用> <块引用>

说明 Js 对象项不应该是字符串。如果您尝试使用上述脚本，您应该能够获得带有名称的下拉菜单。

如何将选项附加到d3中的选择组合框中

2 个答案: