cytoscape-html
allows you to render arbitrary HTML as nodes on the graph
npm install cytoscape-html
First, import the extension and Cytoscape.js library into your project:
import cytoscape from 'cytoscape';
import cytoscapeHTML from 'cytoscape-html';
Create a Cytoscape instance and enable the HTML nodes extension:
cytoscape.use(cytoscapeHTML);
const cy = cytoscape({
container: document.getElementById('cy-container'),
elements: [...], // Define your network elements here
// Other Cytoscape options...
});
Create nodes with an html
field
const elements = [
// ...other elements
{
data: {
id: 'html-node-1',
html: '<div class="node-content">This is an HTML node!</div>',
},
},
];
cy.add(elements);
To create an HTML node, define a node in your elements array with the html field:
// tell cytoscape-html to render the nodes with a data.html attribute
cytoscape.nodes().renderHTMLNodes();
You may also hide the underlying node with hideOriginal
:
cytoscape.nodes().renderHTMLNodes({ hideOriginal: true });
You can style your HTML nodes using CSS classes, and you can attach event listeners using Cytoscape's event handling mechanisms.
An example is included in the /example
directory. This example demonstrates:
- Creating three colored nodes (red, green, and blue) with custom HTML content
- Using the
renderHTMLNodes
function to render the HTML content
To run the example:
- Build the extension:
npm run build
- Open the
example/index.html
file in your browser
This project is licensed under the MIT License.