javascript - D3(v5) 带搜索的可折叠树

Question

我正在尝试通过搜索显示 d3 可折叠树，这是使用[搜索树][1]的引用示例

[1]:https://bl.ocks.org/jjzieve/a743242f46321491a950我收到错误 select2() 不是函数。我在 v5 上没有得到任何解决方案，如何根据我的代码更改上面的示例。

这是我的代码

    function searchTree(obj, search, path) {
        if (obj.name === search) { //if search is found return, add the object to the path and return it
            path.push(obj);
            return path;
        }
        else if (obj.children || obj._children) { //if children are collapsed d3 object will have them instantiated as _children
            var children = (obj.children) ? obj.children : obj._children;
            for (var i = 0; i < children.length; i++) {
                path.push(obj);// we assume this path is the right one
                var found = searchTree(children[i], search, path);
                if (found) {// we were right, this should return the bubbled-up path from the first if statement
                    return found;
                }
                else {//we were wrong, remove this parent from the path and continue iterating
                    path.pop();
                }
            }
        }
        else {//not the right object, return false so it will continue to iterate in the loop
            return false;
        }
    }

    function extract_select2_data(node, leaves, index) {
        if (node.children) {
            for (var i = 0; i < node.children.length; i++) {
                index = extract_select2_data(node.children[i], leaves, index)[0];
            }
        }
        else {
            leaves.push({ id: ++index, text: node.name });
        }
        return [index, leaves];
    }


    console.log("left side  hitting ");
    // Set the dimensions and margins of the diagram
    var margin = { top: 20, right: 120, bottom: 20, left: 120 },
        width = 1280 * 10 - margin.right - margin.left,
        height = 1200 *10 - margin.top - margin.bottom;

    // append the svg object to the body of the page
    // appends a 'group' element to 'svg'
    // moves the 'group' element to the top left margin
    var svg = d3.select(".col-md-6").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 + ")");

    var i = 0,
        duration = 750,
        root, path,select2_data;

    // declares a tree layout and assigns the size
    var treemap = d3.tree().size([height, width]);


    function openPaths(paths) {
        for (var i = 0; i < paths.length; i++) {
            if (paths[i].id !== "1") {//i.e. not root
                paths[i].class = 'found';
                if (paths[i]._children) { //if children are hidden: open them, otherwise: don't do anything
                    paths[i].children = paths[i]._children;
                    paths[i]._children = null;
                }
                update(paths[i]);
            }
        }
    }

    // Assigns parent, children, height, depth
    root = d3.hierarchy(this.parentTreeObj, function (d) { return d.children });
    select2_data = extract_select2_data(this.parentTreeObj,[],0)[1];
    root.x0 = height / 2;
    root.y0 = 0;
    // Collapse after the second level
    root.children.forEach(collapse);

    update(root);

    $(".col-md-6").select2({
        data: select2_data,
        containerCssClass: "search"
    });

    //attach search box listener
    $(".col-md-6").on("select2-selecting", function (e) {
        var paths = searchTree(root, e.object.text, []);
        if (typeof (paths) !== "undefined") {
            openPaths(paths);
        }
        else {
            alert(e.object.text + " not found!");
        }
    })

    d3.select(self.frameElement).style("height", "800px");

    // Collapse the node and all it's children
    function collapse(d) {
        if (d.children) {
            d._children = d.children
            d._children.forEach(collapse)
            d.children = null
        }
    }


    function update(source) {

        var duration = d3.event && d3.event.altKey ? 5000 : 500;

        // compute the new height
        var levelWidth = [1];
        var childCount = function (level, n) {

            if (n.children && n.children.length > 0) {
                if (levelWidth.length <= level + 1) levelWidth.push(0);

                levelWidth[level + 1] += n.children.length;
                n.children.forEach(function (d) {
                    childCount(level + 1, d);
                });
            }
        };
        childCount(0, root);
        var newHeight = d3.max(levelWidth) * 20; 

        treemap = d3.tree().size([newHeight, width]);
        // Assigns the x and y position for the nodes
        var treeData = treemap(root);

        // Compute the new tree layout.
        var nodes = treeData.descendants(),
            links = treeData.descendants().slice(1);

        // Normalize for fixed-depth.
        nodes.forEach(function (d) { d.y = (d.depth * 180); });

        // ****************** Nodes section ***************************

        // Update the nodes...
        var node = svg.selectAll('g.node')
            .data(nodes, function (d) {
                return d.id || (d.id = ++i);
            });

        // Enter any new modes at the parent's previous position.
        var nodeEnter = node.enter().append('g')
            .attr('class', 'node')
            .attr("transform", function (d) {
                return "translate(" + source.y0 + "," + source.x0 + ")";
            })
            .on('click', click);

        // Add Circle for the nodes
        nodeEnter.append('circle')
            .attr('class', 'node')
            .attr('r', 1e-6)
            .style("fill", function (d) {
                return d._children ? "#eb8c00" : "#da5506";
            });

        // Add labels for the nodes
        nodeEnter.append('text')
            .attr("dy", ".35em")
            .attr("x", function (d) {
                return d.children || d._children ? -13 : 13;
            })
            .attr("text-anchor", function (d) {
                return d.children || d._children ? "end" : "start";
            })
            .text(function (d) {
                return d.data.name;
            });

        // UPDATE
        var nodeUpdate = nodeEnter.merge(node);

        // Transition to the proper position for the node
        nodeUpdate.transition()
            .duration(duration)
            .attr("transform", function (d) {
                return "translate(" + d.y + "," + d.x + ")";
            });

        // Update the node attributes and style
        nodeUpdate.select('circle.node')
            .attr('r', 10)
            .style("fill", function (d) {
                return d._children || d._id ? "#eb8c00" : "#da5506";
            })
            .attr('cursor', 'pointer');


        // Remove any exiting nodes
        var nodeExit = node.exit().transition()
            .duration(duration)
            .attr("transform", function (d) {
                return "translate(" + source.y + "," + source.x + ")";
            })
            .remove();

        // On exit reduce the node circles size to 0
        nodeExit.select('circle')
            .attr('r', 1e-6);

        // On exit reduce the opacity of text labels
        nodeExit.select('text')
            .style('fill-opacity', 1e-6);

        // ****************** links section ***************************

        // Update the links...
        var link = svg.selectAll('path.link')
            .data(links, function (d) { return d.id; });

        // Enter any new links at the parent's previous position.
        var linkEnter = link.enter().insert('path', "g")
            .attr("class", "link")
            .attr('d', function (d) {
                var o = { x: source.x0, y: source.y0 }
                return diagonal(o, o)
            });

        // UPDATE
        var linkUpdate = linkEnter.merge(link);

        // Transition back to the parent element position
        linkUpdate.transition()
            .duration(duration)
            .attr('d', function (d) { return diagonal(d, d.parent) });

        // Remove any exiting links
        var linkExit = link.exit().transition()
            .duration(duration)
            .attr('d', function (d) {
                var o = { x: source.x, y: source.y }
                return diagonal(o, o)
            })
            .remove();

        // Store the old positions for transition.
        nodes.forEach(function (d) {
            d.x0 = d.x;
            d.y0 = d.y;
        });

        // Creates a curved (diagonal) path from parent to the child nodes
        function diagonal(s, d) {
            console.log("left side  hitting inside ");
            console.log("in Left");
            //  console.log("idddd",d.data.id);
            path = `M ${s.y} ${s.x}
                          C ${(s.y + d.y) / 2} ${s.x},
                            ${(s.y + d.y) / 2} ${d.x},
                            ${d.y} ${d.x}`

            return path
        }

        // Toggle children on click.
        function click(d) {
            if (d.children) {
                d._children = d.children;
                d.children = null;
                // d._id = d.data.id;
                // d.data.id = null;
            } else {
                d.children = d._children;
                d._children = null;
                // d.data.id = d._id;
                // d._id = null;
            }
            update(d);
        }
    }

任何人都可以帮我解决这个问题吗？提前致谢

Answer 1

您是否已将文件链接到 select2 库？例如，你有这个吗:

    <link rel="stylesheet" type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.min.css"></link>
    <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.min.js"></script>

如果您可以通过 JSFiddle、bl.ocks 或存储库共享链接，那也会有很大帮助。让我知道这是否有帮助。