Showing labels at a certain depth in a Javascript Infovis Toolkit Treemap

Question

I'm creating a treemap with the Javascript Infovis Toolkit with 4 levels (Olympics > Sport > Event > Medals) and am wanting to show three at a time — but only labels for 2/3.

(For instance: In the top view, I would show all the different Sports, and all the events inside the sports, but not the labels for the events because there are too many.)

I'm using the following code to try and hide levels, but it doesn't un-hide them when I zoom in.

onPlaceLabel: function(domElement, node){
    if (node._depth == 0) {console.dir(node);}
        if (node._depth > 1) {
            domElement.style.display = 'none';
        } else {
            domElement.style.display = '';          
        }
}

It seems that _depth doesn't change when you zoom in/out — it's a static property of each node.

I may be able to write a conditional that changes the depth level to show based on the depth current node set as parent. Anyone know where I'd find that?

Thanks!

Answer 1

Figured it out! The onBeforeComputer(); method does operations on the selected node before everything's computed. See below code:

//sets the selected node depth as the .currentParentDepth
onBeforeCompute : function(node){
    if (typeof this.currentParentDepth === "undefined") {
        this.currentParentDepth = 0;
    }
    else {
        this.currentParentDepth = node._depth; 
    }
},

onPlaceLabel: function(domElement, node){
    if (this.currentParentDepth == 0) {
        if (node._depth > 1) {
            domElement.style.display = 'none';
        } else {
            domElement.style.display = '';          
        }
    } else if (this.currentParentDepth == 1) {
        if (node._depth > 2) {
            domElement.style.display = 'none';
        } else {
            domElement.style.display = '';          
        }           
    }
}