Quantcast
Channel: Active questions tagged javascript - Stack Overflow
Viewing all articles
Browse latest Browse all 138163

javascript zoomable tree map click the last node

$
0
0

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.enter image description here

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. this the treemap

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.


Viewing all articles
Browse latest Browse all 138163

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>