arbor.js (क्वेरी प्लगइन) में किनारों पर लेबल जोड़ें

Question

मैं arbor.js में किनारों पर लेबल कैसे जोड़ूं यह एक ग्राफ विज़ुअलाइजेशन लाइब्रेरी है।

मान लीजिए ए और बी नोड्स रहे हैं और ई बढ़त एक कच्चे रास्ते एक "पाठ नोड" टी सम्मिलित किया जाएगा और एटी में शामिल होने और टीबी

है, लेकिन मैं यह नहीं करना चाहते, वहाँ किसी भी है अन्य रास्ता?

यहाँ नमूना कोड

var theUI = { 
    nodes:{A:{color:"red", shape:"dot", alpha:1}, 
     B:{color:"#b2b19d", shape:"dot", alpha:1}, 
     C:{color:"#b2b19d", shape:"dot", alpha:1}, 
     D:{color:"#b2b19d", shape:"dot", alpha:1}, 
    }, 
    edges:{ 
     A:{ 
      B:{length:.8}, 
      C:{length:.8}, 
      D:{length:.8} 
      } 
    } 
} 

var sys = arbor.ParticleSystem() 
sys.parameters({stiffness:900, repulsion:2000, gravity:true, dt:0.015}) 
sys.renderer = Renderer("#sitemap") 
sys.graft(theUI) 

इस में एक बी, सी और डी कैसे किनारों के लेबल की आपूर्ति करने से जुड़ा है है,?

Answer 1

arbor.js आपको पूरे ग्राफ को प्रस्तुत करने के लिए कोड लिखने की अनुमति देता है। आप जो कुछ भी चाहते हैं उसे प्रस्तुत कर सकते हैं जिसमें ड्राइंग एज शीर्षक हैं जिन्हें आप एक अलग मानचित्र में स्टोर कर सकते हैं।

redraw:function() 
{ 
    ctx.fillStyle = "white"; 
    ctx.fillRect (0,0, canvas.width, canvas.height); 

    particleSystem.eachEdge (function (edge, pt1, pt2) 
    { 
     ctx.strokeStyle = "rgba(0,0,0, .333)"; 
     ctx.lineWidth = 1; 
     ctx.beginPath(); 
     ctx.moveTo (pt1.x, pt1.y); 
     ctx.lineTo (pt2.x, pt2.y); 
     ctx.stroke(); 

     ctx.fillStyle = "black"; 
     ctx.font = 'italic 13px sans-serif'; 
     ctx.fillText (edge.data.name, (pt1.x + pt2.x)/2, (pt1.y + pt2.y)/2); 

    }); 

    particleSystem.eachNode (function (node, pt) 
    { 
     var w = 10; 
     ctx.fillStyle = "orange"; 
     ctx.fillRect (pt.x-w/2, pt.y-w/2, w,w); 
     ctx.fillStyle = "black"; 
     ctx.font = 'italic 13px sans-serif'; 
     ctx.fillText (node.name, pt.x+8, pt.y+8); 
    });  
    }; 

इस कोड की उम्मीद प्रत्येक बढ़त के डेटा संपत्ति है जबकि प्रारंभ भरे जाने के लिए:

बस ओवरराइड विधि इस तरह से प्रतिपादक में प्रस्तुत करना।

मैं सभी नोड्स और किनारों हस्तचालित रूप से अपने कस्टम मानचित्र और तरीकों addNode/addEdge का उपयोग कर बनाने के लिए, बू मैं तुम्हें एक छोटे से अपने कोड के कस्टम डेटा से इस तरह से किनारों प्रारंभ करने में बदल सकते हैं लगता है:

var theUI = { 
    nodes:{A:{color:"red", shape:"dot", alpha:1}, 
     B:{color:"#b2b19d", shape:"dot", alpha:1}, 
     C:{color:"#b2b19d", shape:"dot", alpha:1}, 
     D:{color:"#b2b19d", shape:"dot", alpha:1}, 
    }, 
    edges:{ 
     A:{ 
      B:{length:.8, data:{name:"A->B"}}, 
      C:{length:.8, data:{name:"A->C"}}, 
      D:{length:.8, data:{name:"A->D"}} 
      } 
    } 
}

पुनश्च: ले this example पर एक नज़र, मैंने इससे बहुत कुछ सीखा।

Answer 2

edge.data{length:.8, data:{name:"A->B"}} तो निम्नलिखित कोड

ctx.fillText (edge.data.data.name, (pt1.x + pt2.x)/2, (pt1.y + pt2.y)/2);

जो मेरे लिए काम किया साथ विधि particleSystem.eachEdge() की अंतिम पंक्ति की जगह है।