javascript - D3 - changing the data of multiple lines onclick -


i want make code changes data of y , x-axis when press radio button, have working except fact don't know how change data of multiple lines.

i want change data off lines using .csv document,at start use "databelgium.csv" , want change data "datanetherlands.csv"

here radiobuttons in 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 define lines (the data use csv-document linked code)

// define 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 add lines svgcontainer (in code use "databelgium.csv" values .attr("d")

// add crime path. svg.append("path")     .attr("class", "line")     .attr("d", crime(data))     .attr("stroke", "red");  // add gdp path. svg.append("path")     .attr("class", "line")     .attr("d", gdp(data))     .attr("stroke", "steelblue"); 

and ofcours important: here have code change data of lines (in code use "datanetherlands.csv" values .attr("d")

// 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 section want apply our changes var svg = d3.select("body").transition();      // make changes <-- here change line values         svg.select(".line")   // change line             .duration(750)             .attr("d", crime(data)); 

i know change data of crime line since use 1 how select other line since can use "svg.elect(".line")?

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

so when create gdp line

//add class crime differentiate gdp line svg.append("path")     .attr("class", "line crime")     .attr("d", crime(data))     .attr("stroke", "red");  ... //add class gdp differentiate gdp line svg.append("path")     .attr("class", "line gdp")     .attr("d", gdp(data))     .attr("stroke", "steelblue"); 

now when select updating crime lines neitherlands do

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

in short class names differentiate between 2 lines.


Comments

Popular posts from this blog

PHP DOM loadHTML() method unusual warning -

python - How to create jsonb index using GIN on SQLAlchemy? -

c# - TransactionScope not rolling back although no complete() is called -