使用 CSV 文件填充下拉列表 - d3答案

【问题标题】：Populate Dropdown list with CSV file - d3使用 CSV 文件填充下拉列表 - d3
【发布时间】：2014-08-26 15:41:51
【问题描述】：

我想在 html 中填充简单的下拉列表，使用 csv 文件中存在的值。我尝试了类似的方法，但它不起作用。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>

</body>
<script src="http://d3js.org/d3.v3.js"></script>
<script>
d3.csv("valuesforDD.csv", function(error, data) {

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


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

        }

</script>

</html>

我应该改变什么？

谢谢

【问题讨论】：

标签： javascript html csv d3.js

【解决方案1】：

            // just declare the d3 js path and put the following code in script tag,
            // change the 'billedTo_list' to your p tag as in below code of HTML.

        <!-- HTML code for select box to populate start here -->
        <table class="seller-desc reciever-desc">
            <tr>
                <td colspan="2">
                    <address>
                        <p class="billedTo_list">Billed To</p>
                    </address>
                </td>
            </tr>
            <tr>
                <td colspan="2">
<span class="to-addres"><input id="name" class="billed_firm" type="text" contenteditable value="M/S."></span>
<span class="to-addres"><input id="name" class="billed_address1" type="text" contenteditable value="Address : "></span><br>
<span class="to-addres"><input id="name" class="billed_address2" type="text" contenteditable value=""></span><br>
<span class="to-addres"><input id="name" class="billed_phno" type="text" contenteditable value="Ph. No. : "></span><br>
<span class="to-addres"><input id="name" class="billed_gstin" type="text" contenteditable value="GSTIN No. :  "></span><br>
                </td>
            </tr>
        </table>
        <!-- HTML code for select box to populate ends here -->

        <!-- javascript code for select box to populate start here -->

            // select the place where you want to add your select box
            var body = d3.select("p.billedTo_list");

            // add the select box dynamically to the div or any element of html
            var menu = body.append("select");

            // pass the csv file name here, it may cause error for direct accessing file install the plugin for chrome for external url access
            d3.csv("example.csv", function(d) {
                return {
                    rank : d.rank,
                    place : d.place,
                    population : d.population,
                    lat : d.lat,
                    lon : d.lon
                };
            }, function(data) {
                menu.selectAll("foo")
                .data(data)
                .enter()
                .append("option")
                .attr("value", d=>d.place)
                .text(d=>d.place);

                // on change select box it will show the related values 
                menu.on("change", function() {
                    var selected_value = $('.billedTo_list select').val();                      
                    $.each( data, function( key, value ) {
                        if(value.place == selected_value) {
                            $('.billed_name').val('M/S. ' + value.place);
                            $('.billed_address').val('Address : ' + value.population);
                            $('.billed_phno').val('Ph. No. : ' + value.lat);
                            $('.billed_gstin').val('GSTIN No. : ' + value.lon);
                        }
                    });
                });
            });
        <!-- javascript code for select box to populate start here -->

【讨论】：

请添加描述以回答。 @Harshal
现在检查代码...它很容易理解...html代码在顶部和下面的js代码就是它...

【解决方案2】：

d3.csv 使用 CSV 文件的第一行作为列名。您应该确保您的 CSV 文件如下所示：
```
value,label
1,"Item 1"
2,"Item 2"
3,"Item 3"
```
访问attr 和text 函数中的数据时，您必须使用字段名称。使用上述 CSV 文件，您将使用 d.value 和 d.label。

这是您的代码的更新版本，您应该能够根据需要使用和调整：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
  <script src="http://d3js.org/d3.v3.js"></script>
  <script>
  d3.csv("valuesforDD.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.value; })
        .text(function (d) { return d.label; });
  });
  </script>
</body>
</html>

【讨论】：