Unreceptive treeemap

complaint_types.csv

treemap.js

<svg width=800 height=400></svg>

<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.2/require.js"></script>
<script>
    requirejs.config({
        paths: {
            d3: "https://d3js.org/d3.v4.js"
            tree: "https://unpkg.com/threshold-tree@1.0.4/umd/threshold-tree"
        }
    });
    
    requirejs(['d3', 'tree'], function(d3, tree) {
        
        d3.csv("complaint_types.csv", function(complaints) {
            
            // Build the threshold tree and convert it to a JSON output.
            let hr = new tree.ThresholdTree(complaints).as_hierarchy();
            
            // Convert that to a hierarchy.
            let root = d3.stratify().id(d => d.name).parentId(d => d.parent)(hr);
            
            // Attach a summer to the hierarchy.
            // First a utility function...
            function object_is_direct_child(root, obj) {
                return (root.children.filter(child => (child.id === obj.name)).length > 0);
            }
            
            // Now the sum function itself.
            let nodal_summer = function(node) {
                return ((object_is_direct_child(root, node)) ? node.n : 0);
            }
            
            root = root.sum(nodal_summer);
            
            // Create our treemap layout factory function.
            let treemap = d3.treemap()
                .tile(d3.treemapResquarify)
                .size([800, 400])
                .round(true)
                .paddingInner(1);
            
            // Apply our treemap function to our data.
            treemap(root);
            
            // Select the SVG.
            const svg = d3.select("svg");
            
            // Lay out the cells (element transform on groups)
            let cells = svg.selectAll("g")
                .data(root.children)
                .enter()
                .append("g")
                .attr("transform", d => `translate(${d.x0}, ${d.y0})`);
            
            // Append rects.
            let rects = cells.append("rect")
                .attr("id", d => `${d.data.name}-rect`)
                .attr("width", d => d.x1 - d.x0)
                .attr("height", d => d.y1 - d.y0)
                .attr("fill", "steelblue")
                .attr("stroke", "white")
                .attr("stroke-width", "1");

            // Add mouseover events signaling interactivity. We want these to fire regardless of whether
            // we are hoving over the text or the rect behind it, so we add invisible rects (same as the)
            // visible ones) to the screen on top, which have hover effects defined on them.
            let hover_rects = cells.append("rect")
                .attr("id", d => `${d.data.name}-hover`)
                .attr("width", d => d.x1 - d.x0)
                .attr("height", d => d.y1 - d.y0)
                .attr("fill", "transparent")
                .attr("stroke", 0);            
            
            // Now we create and bind the click event.
            let click = function(d) {
                if (d.data.children.length > 0) {
                    // Use the hover ID to get the underlying name attr (e.g. "Noise-hover" -> "Noise")
                    let name = this.getAttribute("id").slice(0,-6);
                    
                    // Select the new root node.
                    let new_root = root.children.find(c => c.id === name);

                    // Sum.
                    new_root = new_root.sum(node => ((object_is_direct_child(new_root, node)) ? node.n : 0));
                    
                    // Here is the problem area. Why doesn't treemap(new_root) work as expected?
                    console.log(new_root);
                    
                    treemap(new_root);
                    
                    console.log(new_root);
                    
                }
            }
            
            hover_rects.on("click", click);
                        
        });
        
    });
</script>