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

Question

如何在Cytoscape节点中添加Html元素？E.g：我想在每个节点上添加2个小按钮，这样用户就可以点击每个按钮，这个节点内的值就会改变。

我想创建的图形示例

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

Answer 1

在画布中呈现HTML是不可能的，您可能也不希望为了性能而这样做。如果您真的想在节点上使用它，我建议创建一个覆盖层——尽管它在实现中有自己的一系列复杂性。否则，最好将交互式元素与节点分开放置（例如工具提示、侧边栏、菜单等）

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是一个非常棒的工具包，值得在这个领域了解。