[英]Add label to edges in arbor.js (Query plugin)
如何在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.如何為邊緣提供標簽?
arbor.js允許您編寫代碼來呈現整個圖形。 您可以在渲染方法中執行任何操作,包括繪制可以存儲在單獨地圖中的邊標題。
只需在Renderer中以這種方式覆蓋方法:
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"}}
}
}
}
PS:看看這個例子 ,我從中學到了很多東西。
edge.data
是{length:.8, data:{name:"A->B"}}
所以用下面的代碼替換方法particleSystem.eachEdge()
的最后一行
ctx.fillText (edge.data.data.name, (pt1.x + pt2.x) / 2, (pt1.y + pt2.y) / 2);
這對我有用。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.