كيف يمكنني منع طريقة infovis infovis spacetree `st.select ()` من العقد المنهارة؟

Question

أنا أستخدم مجموعة أدوات JavaScript Infovis وخاصة 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 مفقودة

قد تحتاج إلى التمرير لأسفل إذا كانت نافذة المتصفح صغيرة بعض الشيء.

لذا فإن سؤالي هو ، كيف أعرض العقد من عقدة الورقة إلى عقدة الجذر في infovis JavaScript دون انهيار أطفال المستوى 3 (المستوى 1 هو الجذر)؟

إذا كانت هناك طريقة للعثور على عقدة 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 الذي يسمى من الخارج ، قام مصمم المكتبة هنا بعمل سيء للإشارة إلى الآثار الجانبية وما لم يكن.

Answer 2

هل حاولت إعداد "مقيد: خطأ" في خصائص St؟ هذا حلها بالنسبة لي.

http://thejit.org/static/v20/docs/files/visualizations/spacetree-js.html