Question

好吧，所以我在javascript上相当新鲜，我会承认，而且我确信这篇文章非常明显......我知道我已经知道了做一些非常愚蠢的事情，但我无法将手指放在上面。

我尝试制作一个下拉菜单，显示来自＆＃34;子类别＆＃34;的内容。我正在使用的这个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

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

＆＃13;

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

＆＃13;

pre{
  display:none;
  }

＆＃13;

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

＆＃13;

Answer 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”并检查控制台，看看当它不起作用时发生了什么错误。

从JS

2 个答案: