在sigma.js中顯示邊緣標籤

Question

我正嘗試使用sigInst.parseGexf（'data/test.gexf'）加載gexf文件。

要創建標籤的邊緣我在gexf文件這一行：

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

但目前看來，sigma.js忽略這個標籤字段。

如何在圖形中顯示邊緣標籤。

在此先感謝。

Answer 1

主sigma.js庫尚不可能。然而，我只是分叉倉庫，並在github.com上添加了這個功能：https://github.com/sam2themax/sigma.js

要啓用此新功能，請在drawingProperties中設置edgeLabels到true。

Answer 2

所有功勞歸於@ sam2themax - 誰分出來。我只是添加相關部分以使生活更輕鬆。

在sigma.js主庫 - 去功能drawEdge（邊緣） 添加以下行：

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(); 
}; 

Answer 3

現在已經可以用做此sigma倉庫中的新插件：https://github.com/jacomyal/sigma.js/tree/master/plugins/sigma.renderers.edgeLabels

只需按照說明構建Sigma項目，就可以在/ b中找到該文件uild/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: { 
    }                 
});