Question

我目前正在使用D3.js http://www.robschmuecker.com/d3-js-drag-and-drop-zoomable-tree/中的可折叠树。我添加了一个搜索和清除功能，但我没有设法让它正常工作。搜索功能返回结果计数，并在树中以黑色显示要跟随的路径并将结果绿化。但当我点击＆＃34;清除＆＃34;它只清除结果而不是框或树。

function search () {
        var text = document.getElementById('searchField').value.toUpperCase();
        document.getElementById('searching').innerHTML = 'Searching: ' +text;

    //reset
        selected = [];
        scope = [];
        selection = '#a';

        baseSvg.selectAll(".nodeText").attr("fill", "black").style("fill-opacity", 0.3);
        baseSvg.selectAll("path").attr("r", 4.5).style("fill", function(d) {
            return d._children ? "green" : "#fff";
        });
        filtered = true;    

        root.children.forEach(searchChildren, text);
        baseSvg.selectAll(selected).attr("fill", "gold");
        baseSvg.selectAll(scope).style("fill-opacity", 1.0);

        document.getElementById('searching').innerHTML = 'Found: ' +selected.length;
    }

    function clearResult() {
        filtered = false;
        selected = [];
        scope = [];
        selection = '#a';
        root.children.forEach(clearNodes);
        baseSvg.selectAll(".nodeText").attr("fill", "black");
        baseSvg.selectAll(".nodeText").style("fill-opacity", 1);
        baseSvg.selectAll("path").attr("r", 4.5).style("fill", function(d) {
            return d._children ? "gold" : "#fff";
        });

  document.getElementById('searching').innerHTML = '';
    }

function clearNodes(d) {
        d.selected = 0;
        if (d.children)
            d.children.forEach(clearNodes);
        else if (d._children)
            d._children.forEach(clearNodes);
    }


    function searchChildren(d) {
        d.selected = 0;
        var patt = new RegExp("\\b"+this+"\\b", "i");
        //if (d.name.toUpperCase().indexOf(this) >= 0) {
        if (d.name.match(patt) != null) {
            selected.push('#' + d.marker);
            selection = selection + ', #' + d.marker;
            d.selected = 1;
            addToScope(d);
        }

        if (d.children)
            d.children.forEach(searchChildren, this);
        else if (d._children)
            d._children.forEach(searchChildren, this);

    }`

我认为在clearResults中添加折叠功能（如下所示）将允许返回原始显示。

// Collapse all children of roots children before rendering. root.children.forEach(function (child) { collapse(child);});

作为D3.js的初学者，我忘了这里的东西，但我不知道是什么。有人有提示或建议吗？完整的代码是http://codepen.io/mscfourn/full/zrwDc/ 感谢。

Answer 1

您没有更新节点，因此在下次有人展开或折叠节点之前，它们不会发生变化。您可以添加

行

update(root);

在您的清除和搜索方法结束时，可以立即看到效果。

在D3.js中重置并清除功能

1 个答案: