2

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

为了看到这一点，我上传了几个例子：

全树扩展 - 未选择
叶子 已选择叶子 - 显示路径，但节点 N2 下的所有子节点缺失

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

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

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

4

2 回答 2

7

好吧，在挖掘了所有代码，用 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，这里的库设计者在指示什么有副作用和什么没有副作用方面做得不好。

于 2010-11-22T14:21:39.237 回答
1

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

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

于 2012-02-08T11:01:30.713 回答