Question

我在csv中有这些数据：

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

我的代码然后为XXX，YYY和ZZZ创建三个类别单选按钮。当用户点击一个收音机时，菜单组合框应该反映与该类别相关联的唯一国家。

一个（不是！）工作示例我在哪里：http://plnkr.co/edit/6zVkTJvTT3ZXrnELPRnx?p=preview

目前的代码如下：

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

            menu.selectAll("option")
                .data(dta)
                .enter()
                .append("option")
                .text(function(d) {
                    return d.country;
                });
        });
    };


    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>

D3将唯一值返回到菜单组合框

0 个答案: