如何在图表上显示边缘标签？答案

【问题标题】：How do I show edge labels on graphs?如何在图表上显示边缘标签？
【发布时间】：2013-10-24 10:24:18
【问题描述】：

我正在尝试使用 sigInst.parseGexf('data/test.gexf') 加载 gexf 文件。

要创建带有标签的边缘，我在 gexf 文件中有这一行：

<edge label="test" id="7" source="14" target="18" type="directed"/>

但似乎 sigma.js 忽略了这个标签字段。

如何在图表中显示边缘标签？

【问题讨论】：

标签： javascript label graph-theory sigma.js

【解决方案1】：

主要的 sigma.js 库尚无法实现。但是，我只是分叉了存储库并在 github.com 上添加了该功能：https://github.com/sam2themax/sigma.js

要启用此新功能，请在您的绘图属性中将 edgeLabels 设置为 true。

【讨论】：

这仍然是真的吗？你能在主库中添加标签吗？
我仍然无法显示边缘标签。我无法看到它与主版本合并。
现在可以使用主存储库附带的 Sigma 插件来执行此操作 - 请参阅我的答案
这个答案不再正确，请参阅哈雷的回答

【解决方案2】：

所有功劳归于@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();
};

【讨论】：

【解决方案3】：

现在可以使用 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: {
    }                                                                  
});

【讨论】：