5

我正在努力学习 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/

谢谢。

4

4 回答 4

4

这似乎有效：

  selectUI.property( "value", xStat );

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

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

于 2013-08-10T22:40:45.160 回答
3

在用断点检查了一些值之后，我想出了如何使这项工作。问题出在最后几行代码上。修改后的（和工作的）代码是这样的：

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

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

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

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

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

斯蒂芬

于 2012-10-29T04:55:57.180 回答
0

添加这个是为了提醒自己，因为我找不到任何其他解决方案。谢谢史蒂文，您的代码让我朝着正确的方向前进，但我无法使用它，因为我没有可比较的静态变量。即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) 中，但这也可能是一个静态值。只需将此作为值属性添加到选择标记，然后在创建选项时使用 (f.attr("value")) 读取选择标记。它似乎工作。

于 2013-01-05T14:08:51.557 回答
0

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

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

那么你可以做...

selectUI.property( "value", xStat )
于 2021-12-10T17:30:21.023 回答