將標籤添加到arbor.js中的邊（查詢插件）

如何在arbor.js中的邊添加標籤這是一個圖形可視化庫。將標籤添加到arbor.js中的邊（查詢插件）

假設A和B是節點，E是邊一種粗暴的方式將插入一個「文本節點」 T 並加入AT和TB

但我不想這樣，還有什麼另一種方式？

這裏的示例代碼

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)

在此，A被連接到B，C和D. 如何提供標籤邊緣？

來源

2011-09-21 chinmayv

如果您沒有爲此添加更多描述，例如代碼，嘗試過的東西，指向插件的鏈接，或者*某些*實際上**可以幫助**人們幫助您，那麼將會被關閉。 – Incognito

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手動所有節點和邊緣，BU我想你可以改變一點你的代碼自定義數據這種方式來初始化邊：

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"}} 
      } 
    } 
}

PS：拿看看this example，我從中學到了很多。

來源

2011-09-22 05:37:38

謝謝，雖然我沒有完全按照這個做，但它確實給了我一個指示如何去做。我使用了gfx obejct（類型爲arbor.Graphics）並使用了gfx.text（）函數。 – chinmayv

此代碼不起作用。你可以發佈gtx.text（）方法或提供更完整的代碼示例嗎？ – gregm

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()的最後一行。

來源

2015-04-16 18:58:08

將標籤添加到arbor.js中的邊（查詢插件）

回答

相關問題