使用d3.js添加下拉菜单

Question

我想在我的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

Answer 1

您需要添加.on("change")的select元素,而不是option元素.

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; });

当前选定的option索引保存在元素selectedIndex上调用的属性中select.选择是数组,因此可以直接访问元素(例如,selection[0][0]).每个option元素都有绑定到它的数据,存储在一个名为的属性中__data__:

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();
}