Changing colour of bar on selecting and unselecting bar in composite chart - d3.js

Question

https://blockbuilder.org/ninjakx/63295ea0a8052716644738d37d390e52
1)
When I click on focus ordinal bar((c2 of composite chart) it should keep the selected one as red and other as grey but it doesn't.
2)
When I click on pie chart I get red bars along with unfiltered bar(grey). Here clicking on red bar should filter other graphs it's doing that as you can see my table and pie chart is getting updated but When I click on gray bar data is also getting filtered but for pie chart it just add grey slices.
Line no. 284-324:
chart_11.fadeDeselectedArea = function (brushSelection) {
var _chart = this;
var bars = _chart.chartBodyG().selectAll('rect.bar');
if (chart_11Filter.length) {
bars.classed(dc.constants.SELECTED_CLASS, function (d) {
return chart_11Filter.includes(d.data.key);
});
bars.classed(dc.constants.DESELECTED_CLASS, function (d) {
return !chart_11Filter.includes(d.data.key);
});
} else {
bars.classed(dc.constants.SELECTED_CLASS, false);
bars.classed(dc.constants.DESELECTED_CLASS, false);
}
};
chart_11.on('pretransition', function(chart) {
chart.selectAll('rect.bar').on('click.ordinal-select', function(d) {
var i = chart_11Filter.indexOf(d.data.key);
if(i >= 0)
chart_11Filter.splice(i, 1);
else
chart_11Filter.push(d.data.key);
chart.applyFilter();
chart.redrawGroup();
});
});
If I use the above code then I get these things So I can think of these solutions.
I can change the colour of c2 bar on clicking by using the above code and applying it to c2.
also for the second graph I can use css to disable on clicking them or I
can make the filter to return none.
But when I tried the above solutions It didn't work. Problems were still the same.
If I make this function applicable only for c2 by replacing chart_11 with c2:
chart_11.fadeDeselectedArea = function (brushSelection) {
.
.
.
.
chart_11.on('pretransition', function(chart) {
.
.
.
I get this:
Edit:
chart_11.on('pretransition', function(chart) {
chart.selectAll('rect.bar').on('click', null);
If I add this I will be able to disable clicking all bar. I have to make it only for C1.
chart_11.on('pretransition', function(chart) {
// chart.selectAll('rect.bar').on('click', null);
chart.selectAll('rect.bar').on('click.ordinal-select', function(d) {
In this function my 2nd issue can be solved I guess. This function has to be customized. Accessing the child C2 and select its rect.bar and filter.
But unable to write the code for it.

Answer 1

This is getting to be a very hacky solution, combining two already hacky customizations of dc.js.
However, you weren't very far off; it is just a matter of restricting behaviors to c2 and cleaning out some irrelevant code.
I removed hide_second_chart because that's not necessary here, and removed the filterHandler for the same reason.
As you pointed out, fadeDeselectedArea has to be overridden on the parent; for some reason it doesn't fire on the children.
But this selection was empty, so nothing happened:
var bars = _chart.chartBodyG().selectAll('rect.bar');
I changed it to
var bars = c2.selectAll('rect.bar');
Also, the click handler should be specific to the second child, so this
chart_11.on('pretransition', function(chart) {
chart.selectAll('rect.bar').on('click.ordinal-select', function(d) {
becomes
c2.on('pretransition.click-handler', function(chart) {
chart.selectAll('.sub._1 rect.bar').on('click.ordinal-select', function(d) {
.sub._1 is CSS that will select only the second child chart.
We can use similar CSS to disable hover behaviors on the first child chart:
.dc-chart .sub._0 rect.bar:hover {
fill-opacity: 1;
}
.dc-chart .sub._0 rect.bar {
cursor: pointer;
}
Enable filterAll, as discussed in Unable to reset the focus ordinal bar chart:
chart_11.filterAll = function() {
chart_11Filter = [];
chart_11.filter(null);
};
Finally, it is confusing if the unfiltered chart is not the same color as deselected bars, so we change grey to #ccc:
.colors('#ccc')
Working fork of your block.
Hopefully the range/focus part still works, because otherwise this is making things much more complicated than they need to be!