Pass user selected value, from dropdown menu, to d3.csv

Question

Somewhat similar to this previous question enter link description here , but for d3.

Basically, I have a dropdown menu that the user can select the year they would like to view. When the user selects the year, I would like to pass that data to the d3.csv command to select the relevant csv file.

The html code is as follows:

<form>                                  <!-- drop down to select year for data -->
        <label>Select year to see each team's scoring:</label>
        <select id="year">
            <option value="Rugby - 2014">2014 - 2015</option>
            <option value="Rugby - 2015">2015 - 2016</option>
            <option value="Rugby - 2016">2016 - 2017</option>
            <option value="Rugby - 2017">2017 - 2018</option>
            <option value="Rugby - 2018">2018 - 2019</option>           
            <option value="Rugby - Total">2014 - 2019</option>          
        </select>
    <form>

I've tried a few iterations, and this is the one I am on now:

<script type="text/javascript"> 

    d3.csv(document.getElementById('year').value & ".csv").then(function(data){ <!-- import CSV file
        data.forEach(function(d) {                                      
            For = +d.For                                                <!-- set 'For' name to d.For and convert to number -->
            Against = +d.Against                                        <!-- set 'Against' name to d.Against and convert to number -->
            Teams = d.Teams                                             <!-- set 'teams' name to d.teams -->
        })})
</script>

Edit: The error I'm getting is TypeError: d3.csv(...).then is not a function

Any suggestions on how to get the selected value from the dropdown into the d3.csv script?

Answer 1

d3.csv(document.getElementById('year').value & ".csv", function(error,data) {
 ...
});

https://github.com/d3/d3-fetch/blob/v1.1.2/README.md#csv