javascript可缩放树映射单击最后一个节点

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

我按照本教程（）制作了树映射。在我的目的中，我希望使最后一个节点可以单击，然后获取节点数据并将其发送到服务器

我使用开发工具获得了树映射的结构

我在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”

我上面的函数仅在根节点不是最后一个节点的父节点时才起作用。

---

我的问题是，如果根节点是该节点的父节点，如何捕获该节点的单击事件。

有一个简单的示例

function display(d) {
    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.key + " (" + formatNumber(d.value) + ")"; 
        });
    children.append("text")
        .attr("class", "ctext")
        .text(function (d) { return d.key; })
        .call(text2);

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

    var t = g.append("text")
        .attr("class", "ptext")
        .attr("dy", ".75em")

    t.append("tspan")
        .text(function (d) { return d.key; });
    t.append("tspan")
        .attr("dy", "1.0em")
        .text(function (d) { return formatNumber(d.value); });
    t.call(text);

    var isDeph = false;

    g.selectAll("rect")
        .style("fill", function (d) {
            if (d.values != null) {
                isDeph = true;
            }
            return d.color;
        })
        .attr('onclick', function (d) { 
            if (!isDeph) { 
                return d.data 
            } 
            return '' 
        });

    function transition(d) {
        if (transitioning || !d) 
            return;
        transitioning = true;

        var g2 = display(d),
            t1 = g1.transition().duration(750),
            t2 = g2.transition().duration(750);

        // Update the domain only after entering new elements.
        x.domain([d.x, d.x + d.dx]);
        y.domain([d.y, d.y + d.dy]);

        // Enable anti-aliasing during the transition.
        svg.style("shape-rendering", null);

        // Draw child nodes on top of parent nodes.
        svg.selectAll(".depth").sort(function (a, b) { 
            return a.depth - b.depth; 
        });

        // Fade-in entering text.
        g2.selectAll("text").style("fill-opacity", 0);

        // Transition to the new view.
        t1.selectAll(".ptext").call(text).style("fill-opacity", 0);
        t1.selectAll(".ctext").call(text2).style("fill-opacity", 0);
        t2.selectAll(".ptext").call(text).style("fill-opacity", 1);
        t2.selectAll(".ctext").call(text2).style("fill-opacity", 1);
        t1.selectAll("rect").call(rect);
        t2.selectAll("rect").call(rect);

        // Remove the old node when the transition is finished.
        t1.remove().each("end", function () {
            svg.style("shape-rendering", "crispEdges");
            transitioning = false;
        });
    }

    return g;
}

---

您可以通过更改json结构来实现最后一次节点单击。最后一个子项应该有一个以上的子项，并且最后一个子项的所有属性都复制到具有相同名称的子项中。 例如，如果最后一个子项是凝聚性聚类。这样结构就可以

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

---

在这里找到完整的实现方法

您找到答案了吗。。我也被困在这里面了@克雷兹镇

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