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

【问题标题】：How do I prevent the Javascript InfoVis SpaceTree `ST.select()` method from collapsing nodes?如何防止 Javascript InfoVis SpaceTree `ST.select()` 方法折叠节点？
【发布时间】：2010-11-19 08:58:27
【问题描述】：

我正在使用 JavaScript InfoVis Toolkit，尤其是 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 是根节点）？

如果有办法找到我的叶节点并将树返回根（在途中设置样式），那么我会很乐意这样做

【问题讨论】：

标签： javascript visualization charts infovis

【解决方案1】：

好吧，在挖掘了所有代码之后，我发现了它。

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

会发生什么

onClick 被调用并触发一系列事件，其中一部分是异步的
select 正在被调用，它或多或少是同步的并且可以正常工作
onClick 终于完成了，它的副作用之一是它重新扩展了图表
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 之外的所有其他从外部调用的函数，这里的库设计者在指出哪些有副作用和哪些没有副作用方面做得不好。

【讨论】：

再次感谢您，您是明星！

【解决方案2】：

您是否尝试在 ST 的属性中设置“约束：假”？这为我解决了。

http://thejit.org/static/v20/Docs/files/Visualizations/Spacetree-js.html

【讨论】：