在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

有助于Cytoscape.js

Cytoscape.js是一个开源项目，任何有兴趣的人都可以为Cytoscape.js做贡献。我们很乐意接受拉动请求。如果您对Cytoscape.js的定期贡献感兴趣，那么我们可以通过联系我们安排授予您对存储库的许可。

如果您的拉取请求是错误修正，请更改主分支。否则，请更改下一版本的分支（即不稳定）。

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图表将显示带有图像的边缘，就像这个