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

Question

我正在使用JavaScript InfoVis Toolkit,特别是SpaceTree可视化.

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

我已经让树扩展得很好但是它选择了一个叶子节点并突出显示回到root的路径,这导致了一些问题.

我正在使用该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()突出显示叶子节点时,此级别下的所有子节点都被折叠/隐藏.

为了看到这一点,我上传了几个例子:

完整树扩展 - 未选择叶子选择
叶子 - 显示路径,但节点N2下面的所有子节点都缺失

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

所以我的问题是,如何在没有折叠3级子级(级别1为根)的情况下,将节点从叶子节点显示回到JavaScript InfoVis中的根节点？

如果有办法找到我的leafe节点并将树移回根(在途中设置样式)那么我就是在讨厌这样做

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从外部调用的所有其他功能之外,图书馆设计师在这里做了一个糟糕的工作,指出什么有副作用,什么没有.