Question

40

Populate Dropdown list with CSV file - d3

rated 0 times [ 43] [ 3] / answers: 1 / hits: 15567 / 10 Years ago, sat, july 5, 2014, 12:00:00

I want to populate simple drop down list in html ,
with values that exist in csv file.
I try something like that , but it doesn't work.

<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>

What should I change?

thank you

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

tinakimv

Add To Favorites

Follow

Total Points: 126

Total Questions: 90

Total Answers: 104

Location: Netherlands

Member since Mon, Jun 7, 2021

3 Years ago

answered 10 Years ago raymondorlandok · Accepted Answer

d3.csv uses the first line of the CSV file as the column names. You should make sure your CSV file looks something like the following:
```
value,label

1,Item 1

2,Item 2

3,Item 3
```

You must use a field name when accessing the data in the attr and text functions. Using the above CSV file, you would use d.value and d.label.

Here is an updated version of your code that you should be able to use and adapt as needed:

<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>