Apply filtering on a D3 stacked bar chart legend

[Adriano]

Hi, 

I have a stacked bar chart with line of Qlik-Sense-D3-Visualization-Library-master extension in my app in Qlik Sense Desktop. I would like to have the legend clickable and apply the filter to entire app. 

I could implement this code as I was suggested by @oz_moyal contributor :  
app.field('f_name').selectValues([val], false, true);

but I don't understand where do I put it.
Directly in the .js of the stacked bar chart? Or in the paint function of the d3-vis-library.js? Or in the sense-utils.js?

Is it the right code or you have a suggestion for other solutions?

Here the code of stacked_bar_chart.js legend:

var legend = plot.selectAll(".legend")
.data(color.domain().slice().reverse())
.enter().append("g")
.attr("class", "legend")
.attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });

legend.append("rect")
.attr("x", width + 6 + legend_width)
.attr("width", 18)
.attr("height", 18)
.style("fill", color_2)

legend.append("text")
.attr("x", width + 30 + legend_width)
.attr("y", 9)
.attr("dy", ".35em")
.style("text-anchor", "start")
.text(function(d) { return d; })

Thank you in advance. 

[oz_moyal]

Hi @Adriano ,

When u build the legend u need to add to each item in the legend a click event, i'm not d3.js expert, so u better google it,

but it should be something like this:

legend.append("text")
.attr("x", width + 30 + legend_width)
.attr("y", 9)
.attr("dy", ".35em")
.style("text-anchor", "start")
.on("click", function(){alert('legend clicked'); 
                                             //here u need to apply the filter to the field
                                            });
.text(function(d) { return d; })

you need to determine which value was clicked and use it to apply the filter to the field.