Microstrategy Using a visualization as a selector D3 costum chart

Question

I'm trying to use a visualization as a selector on a D3 costum chart. I'm following the SDK documentation Here, and I can't make my example work.

Basicly I star by declaring "me" var and enable the "use as filter" option.

var me = this;
this.addUseAsFilterMenuItem();

Then, when appending de svg element, I add the clear and end selecion methods:

var g = d3.select(this.domNode).append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
    .on("click", function(d) {
        if (event.target.classList.contains('bar')) {
            me.clearSelections();
            me.endSelections();
            return true;
        } else {
            return true;
        }
     });

When getting data I use the hasSelection attribute:

var data = this.dataInterface.getRawData(mstrmojo.models.template.DataInterface.ENUM_RAW_DATA_FORMAT.TREE, {
  hasSelection: true
 }).children;

And when adding the "applyselection" method on my bars:

 g.selectAll(".bar")
.data(data)
.enter()
.append("rect")
.attr("class", "bar")
.attr("x", function(d) {
    return x(d.name);
})
.attr("y", function(d) {
    return y(d.value);
})
.attr("height", function(d) {
    return height - y(d.value);
})
.attr("width", x.rangeBand())
.style("fill", function(d) {

})
.on("click", function(d) {
    me.applySelection(d.selection);
});

But it does not work. I manage to console d.selection on the bar click event, i it's undifined.

Can some one please give me a hand on this?

Thank you.

Answer 1

I was able to find out what was wrong with my code, after spending many many hours on this. The selection method must be called like this:

.on("click", function(d, i) {
    me.applySelection(data[i].attributeSelector);
    return true;
});