初始化用于绘图节点的 cytoscape JavaScript 图形库

Initializing cytoscape javascript graphic library for drawing nodes

本文关键字：cytoscape JavaScript 图形库节点用于绘图初始化更新时间：2023-09-26

谁能告诉我如何在BlueFish html编辑器中集成以下代码：它正在开始编写细胞景观代码.js

CSS

body { 
          font: 14px helvetica neue, helvetica, arial, sans-serif;
        }
    #cy {
      height: 100%;
      width: 100%;
      position: absolute;
      left: 0;
      top: 0;
    }

JavaScript

 $(function() { // on dom ready
        $('#cy').cytoscape({
            style: cytoscape.stylesheet()
                .selector('node')
                .css({
                'content': 'data(name)',
                    'text-valign': 'center',
                    'color': 'white',
                    'text-outline-width': 2,
                    'text-outline-color': '#888'
            })
                .selector('edge')
                .css({
                'target-arrow-shape': 'triangle'
            })
                .selector(':selected')
                .css({
                'background-color': 'black',
                    'line-color': 'black',
                    'target-arrow-color': 'black',
                    'source-arrow-color': 'black'
            })
                .selector('.faded')
                .css({
                'opacity': 0.25,
                    'text-opacity': 0
            }),
            elements: {
                nodes: [{
                    data: {
                        id: 'j',
                        name: 'Jerry'
                    }
                }, {
                    data: {
                        id: 'e',
                        name: 'Elaine'
                    }
                }, {
                    data: {
                        id: 'k',
                        name: 'Kramer'
                    }
                }, {
                    data: {
                        id: 'g',
                        name: 'George'
                    }
                }],
                edges: [{
                    data: {
                        source: 'j',
                        target: 'e'
                    }
                }, {
                    data: {
                        source: 'j',
                        target: 'k'
                    }
                }, {
                    data: {
                        source: 'j',
                        target: 'g'
                    }
                }, {
                    data: {
                        source: 'e',
                        target: 'j'
                    }
                }, {
                    data: {
                        source: 'e',
                        target: 'k'
                    }
                }, {
                    data: {
                        source: 'k',
                        target: 'j'
                    }
                }, {
                    data: {
                        source: 'k',
                        target: 'e'
                    }
                }, {
                    data: {
                        source: 'k',
                        target: 'g'
                    }
                }, {
                    data: {
                        source: 'g',
                        target: 'j'
                    }
                }]
            },
            ready: function() {
                window.cy = this;
                // giddy up...
                cy.elements().unselectify();
                cy.on('tap', 'node', function(e) {
                    var node = e.cyTarget;
                    var neighborhood = node.neighborhood().add(node);
                    cy.elements().addClass('faded');
                    neighborhood.removeClass('faded');
                });
                cy.on('tap', function(e) {
                    if (e.cyTarget === cy) {
                        cy.elements().removeClass('faded');
                    }
                });
            }
        });
    }); // on dom ready

.HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://cytoscape.github.io/cytoscape.js/api/cytoscape.js-latest/cytoscape.min.js"></script>
<body>
  <div id="cy"></div>
</body>