为绘制节点初始化cytoscape JavaScript图形库

Question

有人能告诉我如何在BlueFish HTML编辑器中集成以下代码吗： 这是cytoscape.js的入门代码

- Rai Ammad Khan

Answer 1

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>

- Rai Ammad Khan