仅在悬停时显示 Sigma 图 CurvedArrow 边

Question

我正在使用 Sigmajs 可视化有向图。我试图通过设置 sigInst.settings.defaultEdgeType: "curvedArrow" 来显示弯曲的边缘，甚至将每个边缘上的 type 设置为 curvedArrow。

有些人通过使用 canvas 渲染器使它工作，我已经在使用一个但是显示的是节点之间的直线和预期的 curvedArrow 仅在以下情况下显示盘旋过来。

我想也许它的默认边缘颜色设置为 canvas 的背景颜色并且无法识别所以我更改了背景颜色并且它没有呈现（再次，直到悬停）

你可以试试我的代码 codepen

这是我的代码：

const settings = {
    minArrowSize: 20,
    defaultEdgeType: "curvedArrow",
    arrowSizeRatio: 10,
    defaultEdgeLabelColor: "#FFFFFF",
    defaultEdgeHoverColor: "yellow",
    edgeHoverColor: 'default',
    defaultEdgeColor: "red",
    defaultNodeColor: "#007FFF",
    defaultLabelColor: "#FFFFFF",
    edgeColor:'default',
    enableEdgeHovering: true,
    enableHovering: false,
    drawEdges: true,
}
const s = new sigma({
    settings,
    renderer: {
        container: document.getElementById('canvas'),
        type: 'canvas'
    },
})
s.graph.addNode({
    id: 'n0',
    label: 'Hello',
    x: Math.random(),
    y: Math.random(),
    size: 5
}).addNode({
    id: 'n1',
    label: 'World !',
    x: Math.random() * 1.7,
    y: Math.random() * 1.5,
    size: 5,
}).addEdge({
    id: 'e0',
    label: '1',
    source: 'n0',
    target: 'n1',
    size: 10,
    type: "curvedArrow",
    edgeColor:'default',
})

Answer 1

通过将 sigma 降级到 v1.1.0 来修复

Answer 2

我相信你的问题是因为 sigma.canvas.edges.curvedArrow.js is not included in the grunt file.

将它添加到您的 sigma 文件夹中的 G运行t 文件中，运行 npm build 您将在构建文件夹中得到一个 sigma.min.js

仅在悬停时显示 Sigma 图 CurvedArrow 边

Sigma Graph CurvedArrow Edges Only Shown on Hover

javascript

render

sigma.js