जावास्क्रिप्ट विज़ुअलाइज़ेशन टूलकिट को अनुकूलित करना स्पेसेट्री नोड

Question

मैंने देखा कि कई लोग संगठन चार्ट के लिए जावास्क्रिप्ट विज़ुअलाइजेशन टूलकिट (जेआईटी) की सलाह देते हैं। मैं संगठन चार्ट के लिए जावास्क्रिप्ट InfoVis Toolkit के स्पेसट्री का उपयोग करने की कोशिश कर रहा हूं। मेरे संगठन चार्ट में नोड्स एक घटक की तरह है जिसमें कर्मचारी प्रोफाइल तस्वीर है, दो अलग-अलग आइकन जो क्लिक पर ओवरले दिखाते हैं और सरल टेक्स्ट की कुछ 3 पंक्तियां नाम, शीर्षक और रिपोर्ट की संख्या ... प्रत्येक पंक्ति अलग हो जाती है एक हल्की क्षैतिज रेखा से। कुछ ऐसा:

मेरा सवाल है, क्या स्पेसेट्री नोड्स को इतनी हद तक अनुकूलित करना संभव है? क्या मेरे पास नोड लगभग किसी अन्य "घटक" या जावास्क्रिप्ट ऑब्जेक्ट की तरह हो सकता है जिसकी अपनी रेंडर विधि हो?

मैं मंचों पर शोध किया और कुछ विकल्प मैं माना जाता हैं:

1. $ jit.ST.NodeTypes.implement() ... लेकिन मैंने देखा कि उदाहरण के आधार पर, इस नोड को अनुकूलित में मदद करने लगते हैं आकृतियों आदि के संदर्भ में लेकिन उपरोक्त लेआउट की तरह नहीं। http://groups.google.com/group/javascript-information-visualization-toolkit/browse_thread/thread/a4a059cbeb10ba23/ebf472366cdbbdef?lnk=gst&q=spacetree+nodetype#ebf472366cdbbdef
2. मैं कम से example5.js में onCreateLabel विधि में innerHTML सेट करने की कोशिश की: मैं अनुकूलन करने के लिए कुछ की तरह बात कर रहा हूँ लेकिन यह कुछ नहीं कर रहा है। हालांकि, मुझे यकीन नहीं है कि नोड अनुकूलन का एक अच्छा तरीका होगा। उदाहरण 5 जेआईटी वेबसाइट पर है (मुझे एक से अधिक हाइपरलिंक पोस्ट करने की अनुमति नहीं है)
3. ग्राफिंग विस्तार करना ... मैं अभी भी इस विकल्प को देख रहा हूं और यह इस समय, मुझे नहीं पता कि कितना जटिल यह स्पेस पेड़ का उपयोग ग्राफ़.मेनोड है और ग्राफ.मेनेड भी कैसा दिखता है? I उन पंक्तियों पर और अधिक सोचने की आवश्यकता है और देखें कि यह भी व्यवहार्य है या नहीं।

Answer 1

आप अपने नोड को ग्राफ़.नोड के प्रोटोटाइप पूर्वजों को बना सकते हैं, अपने इच्छित स्लॉट सेट अप कर सकते हैं, फिर उचित रेंडर/बल कोड अनुकूलन जोड़ें।

Answer 2

स्पेसेट्री को बहुत अधिक अनुकूलित किया जा सकता है। नोड्स छवियों या जो कुछ भी हम चाहते हैं प्रदर्शित कर सकते हैं। हम नोड्स के लिए कस्टम क्लिक घटनाएं कर सकते हैं। कस्टम घटनाओं के लिए, आपको ऑनक्लिक घटना में पूरे पेड़ को फिर से खींचा जाना होगा।

यहां एक उदाहरण है। क्लिक घटना के सफलता समारोह पर।

{id:"90", name:"<a href='javascript:;' class='clickable' name='90'><img src='images/picture.gif' width='30' height='30' alt='pic' /></a>", data:{}, children:[]} 

मार्क जवाब के रूप में उपयोगी है: यहाँ मैं वर्ग पर क्लिक करें घटना कहा जाता है "क्लिक करने योग्य"

 $.ajaxSetup({ cache: false });    
      $(".clickable").live("click", function() {    
      $.ajax({ 
       url: url + "?id=" + parentId + "&ts=" + new Date().getMilliseconds(), 
       type: "POST", 
       cache: false, 
       dataType: "html", 
       success: function (html) {      
        init(html);       
       } 
       }); 
      }); 

नाम संपत्ति इस तरह छवि देने के लिए इस्तेमाल किया जा सकता। धन्यवाद।

Answer 3

मैं spacetrees का उपयोग कर रहा हूं और मैंने बस लेबल प्रकार को HTML (जो डिफ़ॉल्ट है) सेट किया है और आप अपने लेबल को स्टाइल करने के लिए नियमित HTML और CSS का उपयोग कर सकते हैं। मैं छवियाँ, लिंक, पाठ, आदि

ध्यान दें कि आप लेबल के साथ काम कर रहे हैं और नहीं नोड है। नोड ग्राफ घटक है; लेबल वह दृश्य है जिसे आप देखते हैं जो नोड का प्रतिनिधित्व करता है।

जब आप "onCreateLabel" के लिए एक समारोह में spacetree पास प्रारंभ:

var myOnCreateLabel = function(label, node) { 
    label.onclick = function(event) {/* setup onclick handler */}; 
    label.innerHTML = "<img src='myImage.png' />"; // use image in label 
}; 
var myST = new $jit.ST({/*other settings*/ onCreateLabel: myOnCreateLabel}); 

Answer 4

अगर आप एचटीएमएल 5/केवल कैनवास के साथ काम करने से परहेज नहीं करते, इस रूप में अच्छी तरह http://orgplot.codeplex.com, सरल अंतरफलक समर्थन छवि नोड के रूप में की कोशिश कुंआ।

Answer 5

this.st=new $jit.ST(

{

  onCreateLabel: function (label, node) 
      { 
       var labelContent = $('<table cellpadding="0" cellspacing="0" class="nodeContainer"><tr><td>' + 
        '<div class="buttonContainer">' + 
        '</div></td></tr><tr><td>' + 
        '<table class="nodeBox" cellpadding="0" cellspacing="0">' + 
        '<tr>' + 
        '<td class="iconTd"></td>' + 
        '<td class="center nodeName">' + node.name + '</td>' + 
        '</tr></table>' + 
        '</td></tr></table>'); 
       thisObject.onCreateLabel.raise(thisObject, { labelContent: labelContent, node: node }); 
       if (node.data && node.data.Icon && node.data.Icon != "") 
       { 
        labelContent.find(".iconTd").append($("<img src='" + node.data.Icon + "' alt=''>")); 
       } 
       else 
       { 
        labelContent.find(".iconTd").remove(); 
       } 

       var lblCtl = $(label).append(labelContent); 

       if (node.data.Data.ChildrenCount) 
       { 
        labelContent.append("<tr><td class='subnode'></td></tr>"); 
       } 
       if (node.name.length > 40) 
       { 
        lblCtl.attr("title", node.name); 
        node.name = node.name.substr(0, 37); 
        node.name = node.name + "..."; 
       }       
       lblCtl.click(function (sender) 
       { 
        //thisObject.isNodeClicked = true; 
        var target = $(sender.target); 
        if (!target.hasClass("subnode")) 
        { 
         if (thisObject.currentSelectedNode) 
         { 
          thisObject.currentSelectedNode.buttonContainer.hide(); 
         } 
         var btnContainer = labelContent.find(".buttonContainer"); 
         thisObject.currentSelectedNode = { nodeElement: lblCtl, node: node, buttonContainer: btnContainer, event: sender }; 
         btnContainer.append(thisObject.$globalButtonContainer.show()).show(); 
         var button = target.closest(".chartActionButton"); 
         if (button.length > 0) 
         { 
          thisObject.onNodeAction.raise(thisObject, { name: button.attr("name"), nodeElement: lblCtl, node: node, button: target }); 
         } 
         else 
         { 
          thisObject.onNodeClick.raise(thisObject, thisObject.currentSelectedNode); 
         } 
        } 
        else 
        { 
         thisObject.st.onClick(node.id); 
        } 
       }); 
       label.id = node.id; 
       //set label styles 
       thisObject.setNodeStyle(node.data.Style, label.style); 
      } 

});