Question

如何在Cytoscape节点中添加Html元素？例如：我想添加到每个节点 - 2个小按钮，因此用户可以单击每个按钮，此节点内的值将发生变化。

我想要创建的图表示例

[IMG] http://i57.tinypic.com/1z1bp1l.jpg[/IMG]

Answer 1

无法在画布中呈现HTML，也不可能想要提高性能。如果你真的想在节点上使用它，我建议创建一个叠加层 - 尽管它在实现中有其自身的一系列复杂性。否则，您最好将交互式元素与节点分开放置（例如工具提示，侧边栏，菜单等...）。

Answer 2

mxGraph似乎是通过使用SVG foreignObject标签以及在HTML中这样做的：

<g style="cursor: move;">
  <g>
    <foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%">
      <div style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 78px; height: 1px; padding-top: 1212px; margin-left: 839px;">
        <div style="box-sizing: border-box; font-size: 0; text-align: center; ">
          <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">
            <div>Some HTML inside SVG</div>
          </div>
        </div>
      </div>
    </foreignObject>
  </g>
</g>

不确定我想在Cytoscape中去那里，因为它的API太好了，无法开始工作，并且您需要处理更新事件流，但是mxGraph是一个很棒的工具包，值得在这个领域了解。

在Cytoscape节点中添加Html按钮/ Html元素

2 个答案: