javascript 在 arbor.js 中为边添加标签（查询插件）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7499047/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Add label to edges in arbor.js (Query plugin)
提问by chinmayv
How do I add labels to edges in arbor.js It is a graph visualization library.
如何在 arbor.js 中为边添加标签它是一个图形可视化库。
Suppose A and B are nodes and E is the edge One crude way would be insert a "text node" T and join A-T and T-B
假设 A 和 B 是节点，E 是边缘一种粗略的方法是插入“文本节点”T 并连接 AT 和 TB
But i don't want to this, is there any other way?
但我不想这样，还有其他办法吗？
Here's the sample code
这是示例代码
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)
In this, A is connected to B, C and D. How to supply label to edges?
在这里，A 连接到 B、C 和 D。如何为边缘提供标签？
回答by Andrei LED
arbor.js allows you to write a code to render the whole graph. You can do whatever you want in render method including drawing edges titles which you can store in a separate map.
arbor.js 允许您编写代码来呈现整个图形。你可以在渲染方法中做任何你想做的事情，包括你可以存储在单独的地图中的绘图边缘标题。
Just override method render in Renderer this way:
只需以这种方式覆盖 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);
});
};
This code expected data property of each edge to be filled while initialization.
此代码期望在初始化时填充每条边的数据属性。
I create all nodes and edges manually using my custom map and methods addNode/addEdge, bu I suppose you can change a little your code to initialize edges with custom data this way:
我使用我的自定义地图和方法 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"}}
}
}
}P.S.: take a look at this example, I learned a lot from it.
PS：看看这个例子，我从中学到了很多。
回答by Krishna Sapkota
edge.datais {length:.8, data:{name:"A->B"}}so replace the last line of the method particleSystem.eachEdge()with the following code
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);which worked for me.
这对我有用。
