A simple cytoscape extension that adds the ability to use HTML for nodes.
npm install cytoscape-htmlcytoscape-html allows you to render arbitrary HTML as nodes on the graph. Click here to see a basic example!npm install cytoscape-html
import cytoscape from 'cytoscape';
import cytoscapeHTML from 'cytoscape-html';
`$3
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...
});
`
$3
Create nodes with an html field
`
const elements = [
// ...other elements
{
data: {
id: 'html-node-1',
html: 'This is an HTML node!',
},
},
];
cy.add(elements);
`$3
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 });
`$3
You can style your HTML nodes using CSS classes, and you can attach event listeners using Cytoscape's event handling mechanisms.Example
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 contentTo run the example:
1. Build the extension:
npm run build
2. Open the example/index.html` file in your browser