如何使用D3(或只是javascript)将表单选项设置为"已选中"

Question

我正在努力学习D3.是否有一种优雅的方法来搜索选择表单元素中的所有选项,并指定一个匹配值为"已选中"的选项？

var xStat = "G";

var statOptions = {
    "Points": "PTS",
    "Goals": "G",
    "Assists": "A",
    "Penalty Minutes": "PIM"
};

// create the select element
var selectUI = d3.select("#horse").append("form").append("select");

// create the options
selectUI.selectAll("option").data(d3.keys(statOptions)).enter().append("option").text(function(d) {
    return d;
});

// add values to the options
selectUI.selectAll("option").data(d3.values(statOptions)).attr("value", function(d) {
    return d;
});


// create a func to check if the value of an option equals the xStat var
// if yes, set the attribute "selected" to "selected"
var checkOption = function(e, i, a) {
    if (e[i]["value"] === xStat) {
        return e[i].attr("selected", "selected");
    }
};

// selectUI.selectAll("option").forEach(checkOption);
selectUI.selectAll("option").call(checkOption);?

我在这里做了非工作尝试:http: //jsfiddle.net/sspboyd/LzrAC/2/

谢谢.

Answer 1

在检查了一些带有断点的值之后，我已经弄清楚如何使其工作。问题出在最后几行代码上。修改后的（和工作的）代码是这样的：

var checkOption = function (e) {
    if(e === xStat){
        return d3.select(this).attr("selected", "selected");
    }
};

selectUI.selectAll("option").each(checkOption);

我搞错了两件事。首先，我使用 .call() 而不是 .each() （each/call API 参考）。

其次，我假设在 selectUI 中选择选项元素会给我一个选项 html 元素的数组，我可以通过查找每个数组条目的“值”来测试它。看着控制台（谢谢 chrome），我最终发现我实际上正在获取每个选项条目的值。我不知道为什么会这样。我很想知道是否有人可以解释。另外，我最终通过“this”引用了选项元素，也不知道为什么会这样。

希望这对其他人有帮助。我已将 jsfiddle 示例更新为现在可用的代码。 http://jsfiddle.net/sspboyd/LzrAC/3/

斯蒂芬