单击事件以进行折叠并在D3中展开不起作用

Question

我正在开展一个项目，在这个项目中，我必须以树的形式显示大量信息。所以我为此选择了D3.js一个很棒的库。我遇到了问题，无法解决问题。 我在stackoverflow上观察到了很多这样的问题 here和here

我有以下javascript代码

var url = "/Home/ShowTree?q="+query;
    var treedt = [];
    $('#result').show();
    $.get(url, null, function (data) {

        $.each(data, function (index, value) {
            var d = { "name": "", "parent": "" }
            d.name = value.name;
            d.parent = value.parent;
            treedt.push(d);
        });
        $('#result').empty();
        process();
    });
    function process() {
        var dataMap = treedt.reduce(function (map, node) {
            map[node.name] = node;
            return map;
        }, {});
        var treeData = [];
        treedt.forEach(function (node) {
            // add to parent
            var parent = dataMap[node.parent];
            if (parent) {
                // create child array if it doesn't exist
                (parent.children || (parent.children = []))
                 // add node to child array
                 .push(node);
            } else {
                // parent is null or missing
                treeData.push(node);
            }
        });
        // ************** Generate the tree diagram  *****************
        var margin = { top: 20, right: 120, bottom: 20, left: 120 },
         width = 3000 - margin.right - margin.left,
         height = 2000 - margin.top - margin.bottom;

        // Misc. variables
        var i = 0;
        var duration = 750;
        var tree = d3.layout.tree()
            .separation(function (a, b) { return ((a.parent == root) && (b.parent == root)) ? 30 : 35; })
         .size([height, width]);
        var diagonal = d3.svg.diagonal()
         .projection(function (d) { return [d.y, d.x]; });
        var svg = d3.select("#result").append("svg")
         .attr("width", width + margin.right + margin.left)
         .attr("height", height + margin.top + margin.bottom)
          .append("g")
         .attr("transform", "translate(" + margin.left + "," + margin.top + ")");


        root = treeData[0];
        function collapse(d) {
            if (d.children) {
                d._children = d.children;
                d._children.forEach(collapse);
                d.children = null;
            }
        }

        //root.children.forEach(collapse);
        update(root);
        function click(d) {
            var concept=d.name;
            var p = d.parent;
            while (p != null) {
                concept += " " + p.name;
                p = p.parent;
            }
            //var temp = '/home/ShowData?id=' + concept;
            //window.open(temp,'_blank');
            if (d.children) {
                d._children = d.children;
                d.children = null;
            } else {
                d.children = d._children;
                d._children = null;
            }
            update(d);
        }
        function update(source) {
            // Compute the new tree layout.
            var nodes = tree.nodes(root).reverse(),
             links = tree.links(nodes);
            // Normalize for fixed-depth.
            nodes.forEach(function (d) { d.y = d.depth * 100; });
            // Declare the nodes…
            var node = svg.selectAll("g.node")
             .data(nodes, function (d) { return d.id || (d.id = ++i); });
            // Enter the nodes.
            var nodeEnter = node.enter().append("g")
             .attr("class", "node")
             .attr("transform", function (d) {
                 return "translate(" + d.y + "," + d.x + ")";
             }).on("click", click);
            nodeEnter.append("circle")
             .attr("r", 4)
             .style("fill", "#f0f");
            nodeEnter.append("text")
             .attr("x", function (d) {
                 return d.children || d._children ? -18 : 18;
             })
             .attr("dy", ".25em")
             .attr("text-anchor", function (d) {
                 return d.children || d._children ? "end" : "start";
             })
   //             .attr("dy", ".35em")
   //.attr("text-anchor", "middle")
             .text(function (d) { return d.name; })
             .style("fill-opacity", 1);
            // Declare the links…
            var link = svg.selectAll("path.link")
             .data(links, function (d) { return d.target.id; });
            // Enter the links.
            link.enter().insert("path", "g")
             .attr("class", "link")
             .attr("d", diagonal);
        }
    }
    return false;
}

并且click事件不执行任何操作。我还想折叠点击节点的兄弟节点。请建议我很担心