Как предотвратить метод свертывания узлов Javascript InfoVis SpaceTree `ST.select ()`? - PullRequest
Новая
       17

Как предотвратить метод свертывания узлов Javascript InfoVis SpaceTree `ST.select ()`?

2 голосов
/ 19 ноября 2010

Я использую 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 отсутствуют

Возможно, вам придется прокрутить страницу вниз, если окно браузера немногоsmall.

Итак, мой вопрос: как мне показать узлы от конечного узла до корневого узла в JavaScript InfoVis, не сворачивая потомки уровня 3 (уровень 1 является корневым)?

Еслибыл способ найти мой главный узел и пройтись подерево обратно в корень (установка стилей на пути), тогда я буду рад сделать это

Ответы [ 2 ]

7 голосов
/ 22 ноября 2010

ОК, после того, как перерыл весь этот код, загромождал его вызовами 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, которые вызываются извне, поэтому разработчик библиотеки плохо показал, что имеет побочные эффекты, а что нет.

1 голос
/ 08 февраля 2012

Вы пытались установить "constrained: false" в свойствах ST?Это решило это для меня.

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

...