javascript - 如何防止 Javascript InfoVis SpaceTree `ST.select()` 方法折叠节点？

Question

我正在使用 JavaScript InfoVis 工具包，尤其是 SpaceTree可视化。

我需要展开所有树，然后显示从特定叶节点返回根的路径。

我已经让树展开得很好，但是叶节点的选择和突出显示返回根的路径导致了一些问题。

我正在使用 ST.select(node, onComplete) 函数来选择我感兴趣的叶节点，实际上返回根的路径(线和节点)被突出显示。

为此，我实现了 onBeforePlotNode 和 onBeforePlotLine ST.Controller 方法，以允许我突出显示节点回到根及其情节:

onBeforePlotNode: function(node){  
  //add some color to the nodes in the path between the  
  //root node and the selected node.  
  if (node.selected) {  
    node.data.$color = "#dddddd";  
  } else {  
    delete node.data.$color;  
  }  
},
onBeforePlotLine: function(adj){
  if (adj.nodeFrom.selected && adj.nodeTo.selected) {
    adj.data.$color = "#33CC33";
    adj.data.$lineWidth = 5;
  } else {
    delete adj.data.$color;
    delete adj.data.$lineWidth;
  }
}

问题是，当我调用 ST.select() 来突出显示叶节点时，该级别下的所有子节点都被折叠/隐藏。

为了查看实际效果，我上传了几个示例:

Full tree expansion - leaf not selected
Leaf selected - path shown, but all children below node N2 missing

如果您的浏览器窗口有点小，您可能需要向下滚动。

所以我的问题是，如何在 JavaScript InfoVis 中将节点从叶节点显示回根节点而不折叠第 3 级的子节点(第 1 级是根节点)？

如果有一种方法可以找到我的叶子节点并将树返回根(在途中设置样式)，那么我会很高兴这样做

Answer 1

好的，在深入挖掘所有代码、用 console.log() 调用和断点将其弄乱之后，我找到了它。

它与初始的 onClick 调用有关，事实上图表作为在后台运行的更新循环以及除了 onClick 之外的所有内容似乎忽略图的 busy 状态。

会发生什么

1. onClick 被调用并触发一系列事件，其中一部分是异步的
2. select 正在被调用，它或多或少是同步的并完成它的工作
3. onClick 终于完成了，它的副作用之一是它重新扩展了图形
4. select 设置了 clickedNode，现在 onClick 使用它的新设置值并搞砸了

解决方案

我们需要重新设计 select 以使其尊重图形的繁忙状态:

select: function(id, onComplete) {
    var that = this;
    if (this.busy) {
        window.setTimeout(function() {
            that.select(id, onComplete);

        }, 1);
        return;
    }
    // original select code follows here (remove the old var that = this; assignment)

就是这样，我们只需检查忙状态并延迟选择，直到它为 false。 这也应该应用于除从外部调用的 onClick 之外的所有其他函数，这里的库设计者在指出哪些有副作用和哪些没有副作用方面做得很糟糕。