javascript - cytoscapejs - ノード本体内に html を埋め込む

Question

これはばかげた質問かもしれませんが、html を cytoscape js ノード内に配置することは可能ですか? 私はドキュメントを読んだことがありますが、ノード内に画像を配置することは可能であることが示唆されていますが、html については何も述べていません。理想的には、これは一連の画像と、画像の上に浮かぶツール ヒントを表示できるようにするためです。前もって感謝します。ジョー

Answer 1

HTML コンテンツをキャンバスと混在させることはできません。キャンバスは、Cytoscape.js が使用する基本的なレンダリング テクノロジです。SVG 画像を使用できます。SVG は HTML DOM に非常に似ており、JS ライブラリで操作できますが、レイアウトはほとんど SVG で手動です。

オプション:

(1) SVG を使用する。SVG コンテンツを取得し、それを ( で) URL エンコードし、それencodeURI()を背景画像として使用できます。次に例を示します。

data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10px" height="7px"><g><g><polygon points="8.433,-0.06 4.985,3.325 1.539,-0.06 -0.066,1.546 4.985,6.566 10.037,1.546" fill="%2361B23B"/></g></g></svg>

data:image/svg+xml;utf8,例のようにプレフィックスが必要です。

(2)各ノードの上に div を配置する拡張機能を作成します。div の位置をノードなどと同期するには、拡張機能で何らかの整理を行う必要があります。