score:0

Accepted answer

I moved the bar chart on top and that made it work fine. An easy solution would be to keep it like that.

A better solution would be to analyse why that happens. With D3 when things happen like this it will often be in your selects. That is your problem here

    d3.select("#sexYear").on("input", function () {
    debugger;
    d3.select("svg").selectAll("rect").remove();
    update(this.value);        
});

You are selecting 'svg' which selects the first svg which is the line chart, not the bar chart. This is because 'd3.select' selects the first of whatever is being called. What I did was add a class called 'barchart' to the barchart and then I select the barchart as such

var chart2 = d3.select("body").append("svg")
.attr('class','barchart')

and

d3.select("#sexYear").on("input", function () {
    debugger;
    d3.select(".barchart").selectAll("rect").remove();
    update(this.value);        

fiddle


Related Query

More Query from same tag