D3.js Function To Filter The Interactive Chart

I am new to D3.js and I am trying to customize an interactive chart. I want to add 'Location' dropdown filters to chart and it should show only the selected Location's data. But no

Solution 1:

Rewrite you change event handler this way:

dropDown.on("change", function () {
    var selected = this.value;

    hGsvg.selectAll(".bar")
        .filter(function(d) {return (selected !== d[0]); })
        .attr("display", 'none');

    hGsvg.selectAll(".bar")
        .filter(function(d) {return (selected === d[0]); })
        .attr("display", 'inline')
        .each(function(d) { helpers.mouseover(d) });
});

Where helpers.mouseover it is mouseover event handler for rectangles.

Check full code in my fork of your plnkr