How to draw multiple d3js zoomable treemap

Question

I'm trying to draw multiple d3js zoomable treemaps.

I succeeded in drawing one based on this example https://codepen.io/moktc/pen/XMGgwP . When I reuse the drawing function the first chart shows blank like if it need the data to display.

The drawing function is

function drawTreeMap(tree) {


        treemap = d3.treemap()
                .tile(d3.treemapSquarify.ratio(height / width * 0.69 *(1 + Math.sqrt(5))))
                .size([width, height])
                .round(false)
                .paddingInner(1);

        var id = "#" +tree;
      svg = d3.select(id).append("svg")
      .attr("width", width + margin.left + margin.right)
      .attr("height", height + margin.bottom + margin.top)
      .style("margin-left", -margin.left + "px")
      .style("margin.right", -margin.right + "px")
        .append("g")
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
      .style("shape-rendering", "crispEdges");

      grandparent = svg.append("g")
      .attr("class", "grandparent");

      grandparent.append("rect")
      .attr("y", -margin.top)
      .attr("width", width)
      .attr("height", margin.top);

      grandparent.append("text")
      .attr("x", 6)
      .attr("y", 6 - margin.top)
      .attr("dy", ".75em");
};

When I use this function twite to display a second treemap with the same data of the first one. the first one turns blank

user_9206120 · Answer

svg, grandparent and treemap are all objects that are declared outside of your function drawTreemap() (this isn't evident from the code that you have posted, but can be seen in the full code example on CodePen), so calling the function twice will act upon the same objects twice. Since these objects form part of the treemap, you need separate copies of these objects for the second treemap, so they should be declared inside drawTreemap().

Furthermore, note that the function display() contains a reference to grandparent, which is not passed to display() as an argument, so two copies of display() need to be declared separately for each copy of grandparent. Hence, display() should also be declared inside drawTreemap() (note that Javascript functions are closures, i.e. their definition includes references to all variables that were in scope at the time when the function was declared, so it is possible to declare functions that refer to variables that are not in global scope without passing them into the function as arguments).

Thirdly, the functions initialize(), accumulate(), layout(), treemap() and display() need to be called separately for each treemap, so it makes sense to include these calls inside drawTreemap().

Therefore you should declare svg, grandparent,treemap and display() locally inside drawTreemap() and include the calls to initialize(), accumulate(), layout(), treemap() and display(), which can be done as follows:

function drawTreemap(treeId) {

    var id = "#" + treeId;
    var svg = d3.select(id).append("svg")
        .attr("width", width - margin.left - margin.right)
        .attr("height", height - margin.bottom - margin.top)
        .style("margin-left", -margin.left + "px")
        .style("margin.right", -margin.right + "px")
        .append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
        .style("shape-rendering", "crispEdges");

    var grandparent = svg.append("g")
        .attr("class", "grandparent");

    grandparent.append("rect")
        .attr("y", -margin.top)
        .attr("width", width)
        .attr("height", margin.top);

    grandparent.append("text")
        .attr("x", 6)
        .attr("y", 6 - margin.top)
        .attr("dy", ".75em");

    var treemap = d3.treemap()
        //.tile(d3.treemapResquarify)
        .size([width, height])
        .round(false)
        .paddingInner(1);

    initialize(root);
    accumulate(root);
    layout(root);
    treemap(root);
    display(root);

    function display(d) {

        //...
    }

}

Here is the full code, based on the example on CodePen that you referenced:




    
    
    


    
        Sample zoomable treemap

Edit to explain how to display only one chart at once:

One way to display only one of the charts at a time, depending on the value of a

Using display to hide one of the charts has the advantage that the charts are not redrawn from scratch each time the user changes the selected chart.

Alternatively, if you wish to have only a single chart drawn in the document at any given time, and to draw a chart each time the user changes the selected chart, you can do so by triggering updateDrillDown() directly from changes to the

and

        function updateDrillDown() {

            var chosen = document.getElementById("chart_selector").value;
            if (chosen == "1") {
                document.getElementById("tree2").innerHTML = "";
                drawTreemap("tree1");
            } else {
                document.getElementById("tree1").innerHTML = "";
                drawTreemap("tree2");
            }
        };

If you have different data for each chart, you should also include the code to create root inside drawTreemap() and add a condition on treeId that determines which data to use.

How to draw multiple d3js zoomable treemap

1 Answers