How to guarantee that a brush in a scatterplot made based in dimension with 3 keys interact with other charts?

Question

How can I guarantee the multi-chart filter behavior by using three keys in the scatterplots dimensions?

as you can see in [ https://jsfiddle.net/rogeraleite/dmf3fstw/2/ ] ..specific in the lines where I declare the dimensions for the scatterplots:

dim1 = ndx.dimension(function (d) {
    return [+d.x, +d.y, d.fruit];
    //return [+d.x, +d.y];
})

If I comment " return [+d.x, +d.y, d.fruit]; " and use " return [+d.x, +d.y]; ", the interactions (brushing) works perfectly. However, once I try to add the third key (d.fruit) in order to color the dots in the chart, the brushing stop working.

Any idea of how to deal with it?

Answer 1

I just realize that to keep the interaction working I had to use only two keys in the dimension creation. However, to create the group I could use another dimension with more than two keys and it would guarantee the right behavior.

See in https://jsfiddle.net/rogeraleite/L8mjrnr1/ :

    dim1 = ndx.dimension(function (d) {
        return [+d.x, +d.y];
    }),
    dim1_2 = ndx.dimension(function (d) {
        return [+d.x, +d.y, d.fruit];
    }),
    dim2 = ndx.dimension(function (d) {
        return [+d.y, +d.z];
    }),
    dim2_2 = ndx.dimension(function (d) {
        return [+d.y, +d.z, d.fruit];
    }),
    group1 = dim1_2.group(),
    group2 = dim2_2.group();

...so when the colorAccessor try to access the third key (d.key[2]), it works! =D

.colorAccessor(function(d) { return d.key[2]; })