Question

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

我按照本教程（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数据：收款人位于底部，只有一个父母是根＆＃34; digit-first2＆＃34;。

{
"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"
}

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

Answer 1

您可以通过更改json结构来实现最后一个节点单击。最后一个孩子应该再有一个孩子密钥，并且所有最后一个孩子的属性都以相同的名称复制到孩子密钥中。例如，如果最后一个孩子是 AgglomerativeCluster 。那么结构可以是

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

在https://codesandbox.io/s/affectionate-thunder-l024x

中找到完整的实现

Answer 2

有一个简单的例子；

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

javascript zoomable tree map单击最后一个节点

2 个答案: