在 cytoscape.js 中添加图像作为边缘标签

Question

使用 cytoscape.js 创建了一个图表。需要在边缘添加图像作为标签。

Answer 1

考后

CanvasRenderer.drawElements 在 https://github.com/cytoscape/cytoscape.js/blob/v2.3.8/src/extensions/renderer.canvas.drawing-redraw.js#L406-L412
CanvasRenderer.drawEdgeText 在 https://github.com/cytoscape/cytoscape.js/blob/v2.3.8/src/extensions/renderer.canvas.drawing-label-text.js#L6-L31
CanvasRenderer.drawEdge 在 https://github.com/cytoscape/cytoscape.js/blob/v2.3.8/src/extensions/renderer.canvas.drawing-edges.js

现在似乎边缘上的图像标签不受支持。

可能添加此功能的一个候选似乎是 CanvasRenderer.drawEdgeText 功能。该实现可能会检查边缘 content 中包含的文本，如果它看起来像是对图像的引用（例如 url），则将其绘制为图像...

https://github.com/cytoscape/cytoscape.js/blob/v2.3.8/README.md

Contributing to Cytoscape.js

Cytoscape.js is an open source project, and anyone interested is encouraged to contribute to Cytoscape.js. We gladly accept pull requests. If you are interested in regular contributions to Cytoscape.js, then we can arrange granting you permission to the repository by contacting us.

If your pull request is a bugfix, please make changes to the master branch. Otherwise, please make changes to the next version's branch (i.e. unstable).

Answer 2

我知道这是一个迟到的答案。但这将帮助像我这样寻找答案的人。我们可以为此使用图标字体或 fontawesome。将边缘数据设置为

edges = {
 data:
 id: "3f5cb5c4-43aa-4f4d-b816-fb4f279585c7"
 label: "1 A  \uf023 \uf022"  //this is the fontawesome unicode chars for lock and notes icons
 source: "1"
 sourceName: "shipping"
 target: "4"
 targetName: "twilio.com"
 value: 2
}

接下来在您的 cytoscape 样式中，提及字体为 fontawesome

{
      selector: '.autorotate',
      style: {
        'edge-text-rotation': 'autorotate',
        'font-size': '8px',
        // 'color': '#000000',
        'color': '#333333',
        'font-family': 'FontAwesome, helvetica neue Cantarell',
        'text-margin-x':'5px',
        'text-margin-y':'5px',
        // 'source-text-margin-x':'5px',
        // 'source-text-margin-y':'5px'
      }
    }

现在你的 cytoscape 图将显示像这样的图像边缘

在 cytoscape.js 中添加图像作为边缘标签

Adding image as a label on edge in cytoscape.js

cytoscape.js

Contributing to Cytoscape.js