javascript - D3 将唯一值返回到菜单组合框-6ren

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

转载作者：行者123 更新时间：2023-12-03 05:31:24

26

4

我在 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 创建三个类别单选按钮。当用户单击单选按钮时，菜单组合框应反射(reflect)与该类别关联的唯一国家/地区。

一个(不是!)我正在做的工作示例: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>

最佳答案

看看这个答案 How to select unique values in d3.js from data和这个修改过的笨蛋http://plnkr.co/edit/DtbYRtMb11vhDn2PTecN?p=preview .

简而言之，用

d3.map(dta, function(d){return d.country;}).keys()

你会得到独特的国家。我还修改了文本，如下所示:

.text(function(d) {
                    return d;
                });

希望这有帮助!

关于javascript - D3 将唯一值返回到菜单组合框，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40927778/

26

4

0

文章推荐： logging - log4j 记录两次

文章推荐： regex - 如何识别给定的字符串是十六进制颜色格式

文章推荐： javascript - 将命令附加到已有的键绑定(bind)

组合/值的mysql分布
我有一个 mysql 表，其中包含一些随机数字组合。为简单起见，以下表为例: index|n1|n2|n3 1 1 2 3 2 4 10 32 3 3 10 4 4
SQL - 组合 AND & OR
我有以下代码: SELECT sdd.sd_doc_classification, sdd.sd_title, sdd.sd_desc, sdr.sd_upl
组合 2 个数据帧时按日期重复变量
如果我有两个要合并的数据框 Date RollingSTD 01/06/2012 0.16 01/07/2012 0.18 01/08/2012 0.17 01/09/20
clojure - 没有码头的环/组合
我知道可以使用 lein ring war 创建一个 war 文件，但它似乎仍然包含码头依赖项。当我构建 war (并在 tomcat 上部署)时，有没有办法排除码头依赖项？如果我根本不能做这件事，
clone - 封装聚合/组合
维基百科关于封装的文章指出: “封装还通过防止用户将组件的内部数据设置为无效或不一致的状态来保护组件的完整性” 我在一个论坛上开始讨论封装，在那里我问你是否应该始终在 setter 和/或 gette
带有复选框的 ExtJS 组合
对于我使用的组合框内的复选框: AOEDComboAssociationName = new Ext.form.ComboBox({ id: 'AOEDComboAssociationName',
c# - 组合 Where 语句的表达式
这个问题在这里已经有了答案: 关闭 10 年前。 Possible Duplicate: How do I combine LINQ expressions into one? public boo
rust - 组合/排列的数量
如何在 rust 中找到排列或组合的数量？例如C(10,6) = 210 我在标准库中找不到这个函数，也找不到那里的阶乘运算符(这就足够了)。最佳答案以@vallentin 的回答为基础，可以进
泛型类型的 Scala 组合
我有一个复杂的泛型类型用例，已在下面进行了简化 trait A class AB extends A{ val v = 10 } trait X[T<:A]{ def request: T }
Hibernate 标准限制 AND/OR 组合
如何使用 Hibernate 限制来实现此目的？ (((A='X') and (B in('X',Y))) or ((A='Y') and (B='Z'))) 最佳答案思考有效 Criteria c
javascript - 在谷歌条形图上绘制直线(组合)
我一定会在我的一个项目中使用谷歌图表。我需要的是，显示一个条形图，并且在条形图中，与每个条形相交的线代表另一个值。如果您查看下面的 jsfiddle，您会发现折线图仅与中间的条形图相交，并继续向其他条
javascript - 组合/匹配数组
只是一个简单的问题，我也很想得到答案，因为我不能百分百理解 Javascript 示例:假设您提示用户输入名称。够简单吧？但是你有一个数组，上面写着一些名字(其中之一就是)，基本上就是我到目前为止所说
具有两个参数的 Haskell 组合
我试图通过 Haskell 理解函数式编程，但在处理函数组合时遇到了很多麻烦。其实我有这两个功能: add:: Integer -> Integer -> Integer add x y = x
Realm :组合 "or"和 "and"
我正在寻找一种在 Realm 查询中组合 AND 和 OR 的方法。这是我的课: class Event extends RealmObject { String id; String
Ruby - 哈希 - 组合
例如，我有一个包含 5 个元素的哈希: my_hash = {a: 'qwe', b: 'zcx', c: 'dss', d: 'ccc', e: 'www' } 我的目标是每次循环哈希时都返回，但没
ios - 组合:以一定的延迟发布序列的元素
我是Combine 的新手，我想得到一个看似简单的东西。假设我有一个整数集合，例如: let myCollection = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] 我想以例如 0
java - 组合、转发和包装
关于“优先组合而不是继承”的问题，我的老师是这样说的: 组合:现有类成为新类的组件转发:新类中的每个实例方法，在现有类的包含实例上调用相应的方法并返回结果包装器:新类封装了现有的这三个概念我不是
java - 组合 if-then 语句
我正在尝试将单个整数从 ASCII 值转换为 0 和 1。相关代码如下所示: int num1 = bin.charAt(0); int num2 = bin.charAt(1);
java - 组合:如何使用点表示法访问非静态变量而不出现空指针异常？
这个问题已经有答案了: What is a NullPointerException, and how do I fix it? (12 个回答) 已关闭 7 年前。我经常看到“嵌套”类中的非静态变
python - 组合/合并具有重复名称的两个数据集
我尝试合并两个数据集(DataFrame)，如下所示: D1 = pd.DataFrame({'Village':['Ampil','Ampil','Ampil','Bachey','Bachey',

首页

博学

6Ren·AI

商城

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