cytoscape-html

cytoscape-html allows you to render arbitrary HTML as nodes on the graph. Click here to see a basic example!

Installation

npm install cytoscape-html

Getting Started

$3

First, import the extension and Cytoscape.js library into your project:
``


    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 content

To run the example: 1. Build the extension:npm run build2. Open theexample/index.html` file in your browser

$3

This project is licensed under the MIT License.