javascript可缩放 TreeMap 单击最后一个节点

Question

如何捕获最后一个节点的点击事件？

我按照本教程(http://bl.ocks.org/ganeshv/6a8e9ada3ab7f2d88022)制作了树状图。在我的目的中，我想让最后一个节点可点击，然后将节点数据发送到服务器。

我使用开发人员工具来获取树图的结构。

我在js文件中的代码是:

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);
                });
            }
        })

我上面的函数只有在它有父节点时才能捕获最后一个节点。
如果加载树图时节点是最后一个子节点，则该函数将不起作用。
收款人是加载树形图时的最后一个节点。


这是我的 JSON 数据:
收款人在底部，它只有一个父节点，即根“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"
}

我上面的函数只有在根不是最后一个节点的父节点时才有效。
我的问题是如果根是该节点的父节点，我如何捕获节点的单击事件。

Answer 1

您可以通过更改 json 结构来实现最后一个节点单击。最后一个 child 应该有一个更多的 child 键，所有最后一个 child 的属性都复制到具有相同名称的 child 键中。
例如，如果最后一个 child 是 聚合集群 .那么结构可以是

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

在这里找到完整的实现 https://codesandbox.io/s/affectionate-thunder-l024x