javascript - 从 JS 中的 csv 数据制作下拉菜单

Question

好吧，我承认我是 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;
        })

});

Answer 1

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

鉴于您的 CSV 具有以下结构:

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

您可以将该数据绑定(bind)到附加选项 的输入选择。查看演示:

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>