D3 - changing the data of multiple lines onclick

Question

i want to make a code that changes the data of my Y and X-axis when i press a radio button, i have everything working now except for the fact that i don't know how to change the data of multiple lines.

I want to change the data off the lines by using another .csv document,at the start i use the "dataBelgium.csv" and i want to change my data to "dataNetherlands.csv"

Here are the radiobuttons in my HTML code:

<form>
    <input type="radio" onclick="updateDataToBelgium()" name="country" value="UpdateToBelgium" checked>Belgium
    <br>
    <input type="radio" onclick="updateDataToNetherlands()" name="country" value="The_Netherlands">The Netherlands
    </form>

Here i define the lines (the data i use is from a CSV-document that is linked to my code)

// Define the lines
var CRIME = d3.svg.line()
    .x(function(d) { return x(d.date); })
    .y(function(d) { return y(d.CRIME); });

var GDP = d3.svg.line()
    .x(function(d) {return x(d.date); })
    .y(function(d) { return y(d.GDP); });

Here i add the lines to my svgContainer (in this code i use "dataBelgium.csv" to get my values for .attr("d")

// Add the CRIME path.
svg.append("path")
    .attr("class", "line")
    .attr("d", CRIME(data))
    .attr("stroke", "red");

// Add the GDP path.
svg.append("path")
    .attr("class", "line")
    .attr("d", GDP(data))
    .attr("stroke", "steelblue");

And ofcours the most important: Here i have my code where i change the data of the lines (in this code i use "dataNetherlands.csv" to get my values for .attr("d")

// Get the data again
    d3.csv("dataNetherlands.csv", function(error, data) {
        data.forEach(function(d) {
            d.date = parseDate(d.date);
            d.CRIME = +d.CRIME;
            d.GDP = +d.GDP;
        });

// Select the section we want to apply our changes to
var svg = d3.select("body").transition();

    // Make the changes <-- HERE I CHANGE THE LINE VALUES
        svg.select(".line")   // change the line
            .duration(750)
            .attr("d", CRIME(data));

I know i only change the data of the CRIME line since i only use this one but how do i select the other line since i can only use "svg.elect(".line")?

ps. adding .attr("d", CSV(data)); to the block of code wont work

Answer 1

So when you create the GDP line

//add another class crime to differentiate your GDP line
svg.append("path")
    .attr("class", "line crime")
    .attr("d", CRIME(data))
    .attr("stroke", "red");

...
//add another class gdp to differentiate your GDP line
svg.append("path")
    .attr("class", "line gdp")
    .attr("d", GDP(data))
    .attr("stroke", "steelblue");

Now when you select for updating the crime lines for neitherlands do

svg.select(".crime")   
        .duration(750)
        .attr("d", CRIME(data));
svg.select(".gdp")   
        .duration(750)
        .attr("d", GDP(data));

In short the class names will differentiate between the two lines.