时间戳

首页 > 解决方案 > 如何将边缘标签添加到 Jsnetworkx 中的图形中

jsnetworkx - 如何将边缘标签添加到 Jsnetworkx 中的图形中

问题描述

我正在从事图形可视化项目并正在使用 JSnetworkx。到目前为止，我已经能够更改边缘宽度和颜色，但我运气不佳，试图让它显示边缘标签。请帮忙。

var G = new jsnx.DiGraph();

G.addNodesFrom([1,2,3,4,5,[9,{color: '#008A00'}]], {color: '#0064C7'});
G.addCycle([1,2,3,4,5]);
G.addEdgesFrom([[1,9], [9,1]],{label:"edge_1"});

jsnx.draw(G, {
    element: '#canvas', 
    withLabels: true, 
    nodeStyle: {
        fill: function(d) { 
            return d.data.color; 
        }
}, 
edge_style:{
    'stroke-width':5,
    fill: "black"
},
labelStyle: {fill: 'pink'},
stickyDrag: true
});

标签： jsnetworkx

解决方案

下面是一个对我有用的原型。

    var G = new jsnx.Graph();
    G.addNodesFrom([
        ['a', { color: 'red' }],
        ['b', { color: 'green' }],
        ['c', { color: 'white' }]
    ]);
    G.addEdgesFrom([
        ['a', 'b', { label: 'a to b label' }],
        ['a', 'c', { label: 'a to c label' }]
    ]);

    jsnx.draw(G, {
        element: '#canvas',
        layoutAttr: {
            friction : 0,
            gravity : 0,
            linkDistance: 400
        },
        withLabels: true,
        withEdgeLabels: true,
        nodeStyle: {
            fill: function (d) {
                return d.data.color;
            }
        },
        edgeLabels: function (d) {
            return d.data.label;
        }
    });

推荐阅读