javascript zoomable tree map click the last node

Question

How can I capture the click event for the last node?

I followed this tutorial(http://bl.ocks.org/ganeshv/6a8e9ada3ab7f2d88022) to make the tree map. In my purpose I want to make the last node clickable, then get the node data send it to server.

I used the developer tool to get the structure of tree map.

My code in the js file is that:

function display(d) {
    lastGroupArray = [];
    // collectLastGroup(d);

    console.log(lastGroupArray);

    grandparent
        .datum(d.parent)
        .on("click", transition)
        .select("text")
        .text(name(d));

    var g1 = svg.insert("g", ".grandparent")
        .datum(d)
        .attr("class", "depth");

    var g = g1.selectAll("g")
        .data(d._children)
        .enter().append("g");

        g.filter(function (d) { return d._children; })
            .classed("children", true)
            .on("click", transition);

    var children = g.selectAll(".child")
        .data(function(d) { return d._children || [d]; })
        .enter().append("g");

        children.append("rect")
            .attr("class", "child")
            .call(rect)
            .append("title")
            .text(function(d) { return d.name + " (" + formatNumber(d.value) + ")"; });
        //append child text
        children.append("text")
            .attr("class", "ctext")
            .text(function(d) { return d.name; })
            .call(text2);

        //append parent text
        g.append("rect")
            .attr("class", "parent")
            .call(rect);

        var ccc = g.selectAll("rect").on("click", function (d){
            if(typeof d.lastGroup !== 'undefined'){
                d.lastGroup.forEach( function (dd) {
                    // lastGroupArray.push(new LastGroup(dd));     
                    console.log(dd.filePath);
                });
            }
        })

My function above only can capture the last node when it has a parent. The function will not work if the node is the last child when the treemap is loaded. The Payee is the last node when the treemap is loaded.

Here is my JSON data: The payee is on the bottom, it only has one parent which is the root "digit-first2".

{
"children": [
    {
        "lastGroup": [{
            "filePath": "Jarfile/output/result/ResultFolder/digit-first2-2017-10-22T16-05-53/result1.csv",
            "name": "0~2",
            "value": 112
        }],
        "children": [
            {
                "lastGroup": [{
                    "filePath": "Jarfile/output/result/ResultFolder/digit-first2-2017-10-22T16-05-53/result3.csv",
                    "name": "0~2",
                    "value": 218
                }],
                "children": [{
                    "lastGroup": [{
                        "filePath": "Jarfile/output/result/ResultFolder/digit-first2-2017-10-22T16-05-53/result7.csv",
                        "name": "0~2",
                        "value": 836
                    }],
                    "name": "Payee",
                    "value": 836
                }],
                "name": "Tran Type",
                "value": 218
            },
            {
                "lastGroup": [{
                    "filePath": "Jarfile/output/result/ResultFolder/digit-first2-2017-10-22T16-05-53/result5.csv",
                    "name": "0~2",
                    "value": 834
                }],
                "name": "Payee",
                "value": 834
            }
        ],
        "name": "[Code-Finger-Print, [Memo]]",
        "value": 112
    },
    {
        "lastGroup": [{
            "filePath": "Jarfile/output/result/ResultFolder/digit-first2-2017-10-22T16-05-53/result2.csv",
            "name": "0~2",
            "value": 138
        }],
        "children": [{
            "lastGroup": [{
                "filePath": "Jarfile/output/result/ResultFolder/digit-first2-2017-10-22T16-05-53/result6.csv",
                "name": "0~2",
                "value": 766
            }],
            "name": "Payee",
            "value": 766
        }],
        "name": "Tran Type",
        "value": 138
    },
    {
        "lastGroup": [{
            "filePath": "Jarfile/output/result/ResultFolder/digit-first2-2017-10-22T16-05-53/result4.csv",
            "name": "0~2",
            "value": 731
        }],
        "name": "Payee",
        "value": 731
    }
],
"name": "digit-first2"
}

My function above will only work when the root is not the parent of the last node. My question is how can I capture the click event for the node if the root is this node`s parent.

Answer 1

You can achieve the last node click by changing the json structure. The last child should have one more children key with all the last child's properties copied in the children key with the same name . For example if the last child is AgglomerativeCluster . Then the structure can be

children: [
        {
          name: "cluster",
          children: [
            { name: "AgglomerativeCluster", 
            children: [{name: "AgglomerativeCluster",value: 3938,count:39}] },
            { name: "CommunityStructure", value: 3812 },
          ]
        }

Find the full implementation here https://codesandbox.io/s/affectionate-thunder-l024x