如何使用 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

这似乎有效：

  selectUI.property( "value", xStat );

新手自己也在同样的问题上摸索。 如果这不是正确的方法，我有兴趣知道它是什么。

http://jsfiddle.net/saipuck/LzrAC/9/

Answer 2

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

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

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

我弄错了两件事。 首先，我使用.call（）而不是.each（）（ 每个/调用API引用 ）。

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

希望这有助于其他人。 我已经将jsfiddle示例更新为现在正在运行的代码。 http://jsfiddle.net/sspboyd/LzrAC/3/

斯蒂芬

Answer 3

添加这个以提醒自己，因为我找不到任何其他解决方案。 谢谢史蒂文你的代码把我放在正确的方向，但我无法使用它，因为我没有静态变量来比较。 即xStat。 我的值是在用于创建选择的数据集中。

我使用它，它更简单，意味着你可以比较不同的数据集 - 虽然我发现没有错误，它确实在select标签中添加了额外的属性。 代码是：

    var f = c.append("select")
        .attr("id", "dpc")
        .attr("value", function (d) { return d.Primary_CauseID })
        .style("height", "30px");

    var temp2 = f.selectAll("option").remove();

    d3.json("key_data21.aspx", function (dataset) {
    temp2.append("option")
    .data(dataset)
    .enter()
    .append("option")
    .attr("value", function (d) { return d.InsertID })
    .attr("selected", function (d) { if (d.InsertID == (f.attr("value"))) { return "selected" } })
    .text(function (d) { return d.Desc_Text });

我选择的选项的值在另一个数据集（d.Primary_CauseID）中，但这也可以是静态值。 只需将此值作为值属性添加到select标记，然后在创建选项时使用（f.attr（“value”））读取select标记。 它似乎工作。

Answer 4

Sai的回答对我有用。 我之前实际上尝试过一次，但是通过阅读其他回复，我意识到您必须在设置选择值之前创建选择选项。

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

那么你可以做...

selectUI.property( "value", xStat )