Question

我正在使用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

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

所以我的问题是，如何在不忽略3级孩子（1级为根）的情况下，将节点从叶节点显示回根节点？

如果有办法找到我的leafe节点并将树移回根（在路上设置样式）那么我就是在讨厌这样做

Answer 1

在挖掘完所有代码后，使用console.log（）调用和断点使其混乱，我找到了它。

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

会发生什么

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之外的所有其他函数，这里的库设计师做了很糟糕的工作，指出了什么有副作用，什么没有副作用。

Answer 2

您是否尝试在ST的属性中设置“constrained：false”？这解决了我。

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

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

2 个答案: