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

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

      })
  })
 });

cyjs格式的输入文件

输出看起来像这样

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

问题描述

2 个解决方案

解决方案1
1 2017-01-04 12:55:34

解决方案2
0 2017-01-05 03:02:10

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

问题描述

2 个解决方案

解决方案1 1 2017-01-04 12:55:34

解决方案2 0 2017-01-05 03:02:10

解决方案1
1 2017-01-04 12:55:34

解决方案2
0 2017-01-05 03:02:10