时间戳

首页 > 解决方案 > Sigma Graph CurvedArrow Edges 仅在悬停时显示

javascript - Sigma Graph CurvedArrow Edges 仅在悬停时显示

问题描述

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

有些人通过使用画布渲染器让它工作，我已经在使用一个，但显示的是节点之间的直线，并且预期curvedArrow仅在悬停时显示。

我想也许它的默认边缘颜色设置为画布的背景颜色并且无法识别，所以我更改了背景颜色并且它没有被渲染（再次，直到悬停在上面）

你可以在这个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',
})

标签： javascriptrendersigma.js

解决方案

我相信您的问题是因为sigma.canvas.edges.curvedArrow.js未包含在grunt 文件中。

将它添加到你的 sigma 文件夹中的 Gruntfile 中，运行npm build，你会sigma.min.js在 build 文件夹中得到一个

推荐阅读