in d3js how can I filter data by clicking on stack bar

Question

I'm trying to filter data by clicking on certain rect bar in a stacked bar. This stack bar is a two dimention graph, the horizontal index is years, and the vertical index different product revenues, I want to filter by certain product in certain year. means when I click on a rect bar of the whole graph, the data should get filtered by certain year and certain product.

my code is :

metrics.on("click", function(d,i,j){
         d3.select(this)
         .style("fill","lightcoral")
         .style("stroke","red");
         fdata =rawdata.filter(function(d){return (d[xvalue]==_seriesA[i])&&(d[yvalue]==_seriesB[j])});
    });

but the weird thing is the value of j is always undefined, although if I attach a title to it :

metrics.append("title").text(
            function(d,i,j) {
                return i + ' - '+j ;
            });

the value of j will get printed correctly, is there anything special about the 'on' click function? why I cannot get the value of j? any help will be appreciated....this is triving me crazy for the whole night...

Answer 1

According to the documentation , the second argument to .on() is a function that takes two arguments, not three. Similarly, it shouldn't work in your second example either.

I think you're getting confused about the distinction between the data and how it is rendered. The .on() function will get you the data. The scales you have created somewhere in your code take that data and map it to x and y coordinates in your graph (or you use the data directly without scales). In the .on() function, you use the data in exactly the same way you used it when you created the graph to start with. That is, the data item ( d in your code) contains the data for the specific position that you're highlighting.