Question

我使用d3并拥有以下内容。我如何更改代码，以便每当更改单选按钮时 - 组合框中的选项＆＃34; world＆＃34;将永远成为可见选项 - 如果图形显示除了世界以外的任何东西，它应该改变为世界吗？

数据：

Category,country
XXX,mex
XXX,world
XXX,mex
XXX,ireland
ZZZ,uk
ZZZ,uk
ZZZ,world
ZZZ,uk
ZZZ,usa
ZZZ,aruba
ZZZ,ireland
YYY,foo
YYY,world
YYY,foo

代码：

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <title>comboBoxWithRadios</title>
    <script src="https://d3js.org/d3.v3.js"></script>
    <style type="text/css">

    #projection-menu {
        position: absolute;
        left: 15px;
        top: 45px;
    }

    </style>
</head>

<body>
    <div id="radioDiv">
        <label>
            <input type="radio" name="dataset" id="dataset" value="XXX"> XXX</label>
        <label>
            <input type="radio" name="dataset" id="dataset" value="YYY" checked> YYY</label>
        <label>
            <input type="radio" name="dataset" id="dataset" value="ZZZ">ZZZ</label>
    </div>
    <select id="projection-menu"></select>
    <script type="text/javascript">
    d3.select("input[value=\"YYY\"]").property("checked", true);
    var exampleCSV = "comboBoxWithRadios.csv"


    selectDataset();

    d3.selectAll("input")
        .on("change", selectDataset);

    function selectDataset() {

        var v = this.value;
        if (undefined == v) {
            v = "YYY"
        }

        d3.csv(exampleCSV, function(rows) {
            dta = rows.filter(function(row) {
                if (row['Category'] == v) {
                    return true;
                }
            });

            //clear out the combobox
            removeOptions(document.getElementById("projection-menu"));

            var menu = d3.select("#projection-menu")
                .on("change", change);
            console.log(d3.map(dta, function(d){return d.country;}))
            menu.selectAll("option")
                .data(d3.map(dta, function(d){return d.country;}).keys())
                .enter()
                .append("option")
                .text(function(d) {
                    return d;
                });
        });
    };


    function removeOptions(selectbox) {
        var i;
        for (i = selectbox.options.length - 1; i >= 0; i--) {
            selectbox.remove(i);
        }
    }

    function change() {
        console.log(this.value);
    };


    </script>
</body>
</html>

Answer 1

使用：

.property("selected", function(d){ 
    return d === "world"; 
})

在您的代码中，应该是这样的：

menu.selectAll("option")
    .data(d3.map(dta, function(d) {
        return d.country;
    }).keys())
    .enter()
    .append("option")
    .property("selected", function(d) {
        return d === "world";
    })
    .text(function(d) {
        return d;
    });

这是你的傻瓜：http://plnkr.co/edit/PRkGX2zvTBmftoGwvHnr?p=preview

PS：您的垃圾邮件中的CSV文件错误。

强制选择选项组合框

1 个答案: