cytoscape-html

KO | EN

gitlite — search

#javascript #python #hacktoberfest #react #ai #machine-learning #docker #nodejs #windows #cli #awesome-list #vue #pytorch #open-source

(★ 9)

Cytoscape.js Extension that allows you to use arbitrary HTML as a node body.

cytoscape-html 최신버젼 다운로드

최종 버전 다운로드 (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# cytoscape-html
`cytoscape-html` allows you to render arbitrary HTML as nodes on the graph. Click [here](https://bradydouthit.github.io/cytoscape-html/) to see a basic example!

## 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.

## 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 build`
2. Open the `example/index.html` file in your browser

### License
This project is licensed under the [MIT](https://github.com/BradyDouthit/cytoscape-html/blob/main/LICENSE) License.

cytoscape-html

cytoscape-html 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

cytoscape-html

cytoscape-html 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README