如何在图形上显示边缘标签
How do I show edge labels on graphs?
我正在尝试使用 sigInst.parseGexf('data/test.gexf') 加载一个 gexf 文件。
要创建带有标签的边缘,我在 gexf 文件中有以下行:
<edge label="test" id="7" source="14" target="18" type="directed"/>
但似乎西格玛.js忽略了这个标签字段。
如何在图表中显示边缘标签?
现在可以使用 sigma 存储库中的新插件来执行此操作:https://github.com/jacomyal/sigma.js/tree/master/plugins/sigma.renderers.edgeLabels
只需按照说明构建 Sigma 项目,您就可以在/build/plugins 文件夹中找到此文件:sigma.renderers.edgeLabels.min.js
将其包含在您的 html 文件中:
<script src="sigma.min.js"></script>
<script src="sigma.renderers.edgeLabels.min.js"></script>
确保边缘定义了"标签"键
var data = {
// specify 'nodes' as well
edges: [
{
id: "e1",
source: "user",
target: "b1",
label: "This is the label", // <----- define 'label' key for your edges
},
]
}
然后在 Sigma 初始化中指定渲染器。
var s = new sigma({
graph: data,
renderer: {
container: "container",
type: "canvas"
},
settings: {
}
});
主 sigma.js 库还不可能。 但是,我只是分叉了存储库并在此处添加了 github.com 功能:https://github.com/sam2themax/sigma.js
要启用此新功能,请在图形特性中将edgeLabels
设置为true
。
所有的功劳都归于@sam2themax——谁分叉了它。我只是添加相关部分以使生活更轻松。
在 sigma 上.js主库 - 转到函数 drawEdge(edge)添加以下行:
var p1 = {};
p1.x = sourceCoordinates[0];
p1.y = sourceCoordinates[1];
var p2 = {};
p2.x = targetCoordinates[0];
p2.y = targetCoordinates[1];
drawEdgeLabel(ctx,edge['label'],p1,p2, color);
创建新方法:
function drawEdgeLabel(ctx, text, p1, p2, color) {
console.log(text);
var alignment = 'center';
var padding = 10;
var dx = p2.x - p1.x;
var dy = p2.y - p1.y;
var len = Math.sqrt(dx * dx + dy * dy);
var avail = len - 2 * padding;
// Keep text upright
var angle = Math.atan2(dy, dx);
if (angle < -Math.PI / 2 || angle > Math.PI / 2) {
var p = p1;
p1 = p2;
p2 = p;
dx *= -1;
dy *= -1;
angle -= Math.PI;
}
var p = p1;
var pad = 1 / 2;
ctx.save();
ctx.textAlign = alignment;
ctx.translate(p.x + dx * pad, p.y + dy * pad);
ctx.rotate(angle);
var fontSize = self.p.defaultLabelSize;
ctx.font = self.p.fontStyle + fontSize + 'px ' + self.p.font;
ctx.fillStyle = color;
ctx.fillText(text, 0, -5);
ctx.restore();
};
相关文章:
- 从桌面读取python文件时高亮显示代码
- 使用JS如何动态更改显示的html文件中的文本背景颜色
- 如何在生成下载文件时显示加载动画
- React重新渲染但未显示正确的组件
- nodejs-expressjs上传图像并显示它们
- 使用JSP从服务器检索和显示图像
- 音频控件在mouseover上显示,在mouseout上淡出
- 让文本输入幻灯片显示输入时的新文本输入?然后向后滑动
- 使用电话间隙在Android应用程序中显示SQL Lite的数据
- 显示5秒后隐藏潜水
- 画廊图像未显示
- 不显示带有本地json文件数据的谷歌地图脚本
- 如何将json数据显示为html
- 谷歌地图不是以HTML显示,而是在JS Fiddle上工作
- Windows8应用程序(html&Javascript):从图片库(除了文件选择器)显示图像的另一种方式
- 高亮显示时编辑文本大小和颜色
- 如何在图形上显示边缘标签
- 为什么我的 d3 力导向图不显示边缘
- Three.js +导入模型:如何显示边缘线条
- 在书的页面边缘显示深度(Turn.js)