在JS中从csv数据制作下拉菜单答案

【问题标题】：Making a drop down menu from csv data in JS在JS中从csv数据制作下拉菜单
【发布时间】：2017-02-13 16:37:55
【问题描述】：

好吧，我承认我是 javascript 的新手，而且我敢肯定从这篇文章中很明显......我知道我在做一些非常愚蠢的事情，但我无法放置我的手指就可以了。

我正在尝试让下拉菜单显示我正在使用的这个 csv 文件中“子类别”列中的内容，但到目前为止，我所能得到的只是一个空格的下拉列表。

我做错了什么？

d3.csv("PCC.csv", function(error, data) {

    var select = d3.select("body")
        .append("div")
        .append("select")

    select
        .on("change", function(d) {
            var value = d3.select(this).property("value");
            alert(value);
        });

    select.selectAll("option")
        .data(data)
        .enter()
        .append("option")
        .attr("value", function(d) {
            return d.TPC;
        })
        .text(function(d) {
            return d.Subcategory;
        })

});

【问题讨论】：

数据长什么样子？
好吧，数据是机密的，所以我不能把它放在这里，但 TPC 是一列数字，子类别是一列不同类别
我不是想看实际的数据，而是看它是怎么形成的，一个数组，一个对象数组，对象长什么样……
只是一个数组。
@7rystan 有什么答案有效吗？您可以检查向下投票箭头下的灰色复选标记以标记为已解决吗？

标签： javascript csv d3.js

【解决方案1】：

这是一种仅使用 D3 创建下拉菜单的方法。

鉴于您的 CSV 具有这种结构：

subCategory,TPC
foo,25
bar,19
baz,42

您可以将该数据绑定到附加option 的输入选择。查看演示：

var body = d3.select("body");
var data = d3.csvParse(d3.select("#csv").text());

var menu = body.append("select");

menu.selectAll("foo")
    .data(data)
    .enter()
    .append("option")
    .attr("value", d=>d.TPC)
    .text(d=>d.subCategory);

menu.on("change", function(){
    console.log(this.value)
});

pre{
  display:none;
  }

<script src="https://d3js.org/d3.v4.min.js"></script>
<pre id="csv">subCategory,TPC
foo,25
bar,19
baz,42</pre>

【讨论】：

谢谢。作为一般规则，在使用 D3 时，三个不需要任何 for 循环。

【解决方案2】：

好的，这里是所有示例（您只需要编辑 d3 的路径和 csv 数据.. 问题是填充组合的子类别不是唯一的，这对我来说看起来很奇怪，因为它们与同一子类别的不同值相关联。

<!DOCTYPE html>
<html>

  <head>


    <title> stack test </title>
    <script type="text/javascript" src="d3/d3.v3.min.js"></script>
        <script type="text/javascript">



     window.onload = function()
        {
        d3.csv("data/PCC-edit.csv",

            function(d) {
                return {

                    TPC: +d.TPC,
                    Subcategory: d.Subcategory

                };  
            },      
            function(data) {
                console.log(data)
                populate_ComboExample(data)
            });
        }

        function populate_ComboExample(data) {

            var example_list= {};
            var example_text= {};
            console.log(data.length)
            for (i=0;i<data.length; i++ ) { // you can calculate the length with js, I choose 10 here for the example
                example_list[i]=data[i].TPC;
                example_text[i]=data[i].Subcategory;
            }


            var select  = document.getElementById("exampleList")

            for (i=0; i < data.length; i++ ) {
                var el = document.createElement("option");
                var temp=example_text[i]
                el.textContent = temp;
                el.value =example_list[i];
                select.appendChild(el);
            }
        }

        function combo_change(thelist) {

            var idx_1 = thelist.selectedIndex;
            alert(thelist.options[idx_1].value);

        }

    </script>


    </head>

    <body>

    <div class="">

    </div>

    <div id="option">

    <form class="comboExample">
    <h4>Subcategory</h4>
    <select name="example_select" id="exampleList" onChange="combo_change(this)">
    </select> 
    </form>


    </div>


</body>

</html>

ps：我使用 d3 v3，但应该适用于 d3 v4。我建议您使用“console.log”并检查控制台，看看它不起作用时发生了什么错误。

【讨论】：

我从您的帖子中学到了很多，但我仍然遇到问题。我什至尝试使用相同的 ID 等等，但我仍然遇到问题。我不确定用什么替换“nb_example”和“example_list”，我总是得到“未定义某某”。
如果有一个可复制的假数据示例会很有帮助。 'nb_example' 是数组的行的 nb。这里我用10。（我忘了替换它，最好的方法是直接用js计算）。对于example_list，这又是我的错误：我忘记了var example_list= {}; 我更新了帖子。
哦，现在有点用了！虽然我得到了 NaN 作为我的选择......但我有一种感觉，这是我的结局吗？在这里，如果你愿意，我上传了一个与我正在使用的类似的编辑过的 CSV，只是包含了虚构的脱敏数据。 dropbox.com/s/24zopp43r3y1ft6/PCC-edit.csv?dl=0
@7rystan 我确实更新了一个与您的数据一起使用的示例。这个对我有用。但是您不能将子类别用作键（就像我之前所做的那样），因为它们不是唯一的..