cytoscape-html v0.1.2
Note from me:
I made this for a specific usecase I encountered and thought others may get some use out of it. I'm not actively developing this extension but feel free to take this concept and make it better.
cytoscape-html
cytoscape-html
is designed to enhance your Cytoscape.js experience by introducing a seamless integration of HTML nodes within your network visualizations.
Installation
npm install cytoscape-html
Getting Started
1. Import the Extension:
First, import the extension and Cytoscape.js library into your project:
import cytoscape from 'cytoscape';
import cytoscapeHTML from 'cytoscape-html';
2. Initialize Cytoscape with HTML Nodes:
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. Add HTML Nodes:
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);
4. Render the HTML:
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 });
Styling and Interaction:
You can style your HTML nodes using CSS classes, and you can attach event listeners using Cytoscape's event handling mechanisms.
License
This project is licensed under the MIT License.