Question

我正在尝试编写一个代码，最终用户可以从下拉菜单中选择一个文件，该文件将显示为Cytoscape.js的网络。我的代码是从服务器获取一个JSON文件，并将该文件显示为具有Cytoscape的网络，但它不能使用下拉列表。我是AJAX和Jquery的新手。任何帮助将不胜感激。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>jQuery Test Project</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/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>
<style>
  body { 
  font: 14px helvetica neue, helvetica, arial, sans-serif;
}

#cy {
  height: 60%;
  width: 60%;
  position: absolute;
  left: 0;
  top: 0;
}

<select class="sel" id="cy"  name="files">
<option  value="">Select Bait Protein</option>
<option  value="CASP9">CASP9.cyjs</option>

 </select><br>
 <script>
  $(function() 
 {
 file_name = $('select').val();
  $('#cy').load(file_name);

  $.get( 'cy', function( data ) {
      $('#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': 'square',
                  'width': 5,
                  'line-color': '#ddd',
          })
              .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 : JSON.parse(data),

          ready: function() {
              window.cy = this;
              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', 'edge', function(e) {
                  if (e.cyTarget === cy) {
                      cy.elements().removeClass('faded');
                  }
              });
          }

      })
  })
 });

Answer 1

我在下面工作了。此外，添加了change侦听器，因为您的代码尝试加载内容一次，并且不会对select更改做出反应。

$('select').on('change', function(){
    // your code
});

https://jsfiddle.net/0uu48aud/2/

Answer 2

这是我的演示代码，它从服务器获取特定文件并使用Cytoscape.js显示它

  body { 
  font: 14px helvetica neue, helvetica, arial, sans-serif;
}

#cy {
  height: 100%;
  width: 100%;
  display: block
  position :absolute
  left: 0;
  top: 0;
}

 $(function() { 
  var test;
  $.get( 'CASP9.cyjs', function( data ) {
      $('#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 : JSON.parse(data),


          ready: function() {
              window.cy = this;



              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');
                  }
              });
          }

      })
  })
 });

The input file in cyjs format

The output looks like this

通过从下拉菜单中选择，使用Cytoscape.js显示JSON文件内容

2 个答案: