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

Question

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

Answer 1

检查后

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

似乎现在边缘的图片标签不支持。

可能添加此功能的一个候选者似乎是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

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

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图将显示带有图像的边缘，如下所示 Django v.2.2 coalesce