Javascript 使用d3.js添加下拉菜单

Javascript 使用d3.js添加下拉菜单,javascript,html,dom,d3.js,Javascript,Html,Dom,D3.js,我试图添加一个下拉菜单到我的d3可视化。问题是eventlistener在选择任何选项时都不会被调用。此外,如何访问所选选项的值?下面是我的代码片段 d3.text("uniqueTeams.php",function(json){ var dd=JSON.parse(json); var b= d3.select("#s4").select("#shru"); var u=b.append("select"); var t=u.selectAll("option

我试图添加一个下拉菜单到我的d3可视化。问题是eventlistener在选择任何选项时都不会被调用。此外,如何访问所选选项的值?下面是我的代码片段

d3.text("uniqueTeams.php",function(json){
    var dd=JSON.parse(json);
    var b= d3.select("#s4").select("#shru");
    var u=b.append("select");
    var t=u.selectAll("option").data(dd).enter().append("option")
        .attr("value",function(d){return d.teamShotID;})
        .text(function(d){return d3.select(this).node().__data__.teamShotID;});
    t.on("change",change);
});
function change(value)
{
    console.log("team",value);
}
change();​​​​

Thankx

您需要将
.on(“更改”)
添加到
选择
元素,而不是
选项
元素

var select  = d3.select("#shru").append("select").on("change", change),
    options = select.selectAll('option').data(dd); // Data join

// Enter selection
options.enter().append("option").text(function(d) { return d.teamShotID; });
当前选定的
选项
索引保存在
select
元素上名为
selectedIndex
的属性中。每个
选项
元素都将有数据绑定到它,存储在名为
\uuuuu data\uuuu
的属性中:

function change() {
    var selectedIndex = select.property('selectedIndex'),
        data          = options[0][selectedIndex].__data__;
}
编辑:为了便于阅读,希望能帮助您理解上面的代码,我还想包括以下可选语法:

function change() {
    var si   = select.property('selectedIndex'),
        s    = options.filter(function (d, i) { return i === si }),
        data = s.datum();
}

希望这能指导你

      var dispatch = d3.dispatch("load", "countrychange");
  d3.csv("data/ERSreputationBlocked.csv",type, function (error, country) {
      if (error) throw error;
      var countryById = d3.map();
      country.forEach(function (d) { countryById.set(d.id, d); });
      dispatch.load(countryById);
      dispatch.countrychange(countryById.get("PH"));
      //console.log(country);
  });
  dispatch.on("load.menu", function(countryById) {
      var select = d3.select("body")
        .append("div")
        .append("select")
        .on("change", function () { dispatch.countrychange(countryById.get(this.value)); });

      select.selectAll("option")
        .data(countryById.values())
        .enter().append("option")
        .attr("value", function (d) { return d.id; })
        .text(function (d) { return d.Country; });

      dispatch.on("countrychange.menu", function (country) {
          select.property("value", country)
          //loading the value based on the selected data
          var svg1 = d3.select("body").append("svg1")
                .attr("width", width)
                .attr("height", height)
          //end of selection

         console.log(country);
      });
  });
  //end of drop down

  function type(d) {
      d.total = d3.sum(d.value, function (k) { return d[k] = +d[k]; });
      return d;
  }