javascript - 如何从外部函数访问 'cy.load()' 等?

标签 javascript jquery jquery-events cytoscape.js

我对 JavaScript 和 cytoscape.js 库都很陌生。我一直在研究示例代码,但我仍然坚持一些基本的东西。

本质上,我想要做的是设置我的基本选项和样式,然后能够从我的服务器返回的 JSON 结构加载我的节点和边。我知道我可以在“ready”函数中使用 cy.load,如下所示:

$(loadCy = function(){

options = {
showOverlay: false,
minZoom: 0.5,
maxZoom: 2,

style: cytoscape.stylesheet()
  .selector('node')
    .css({
      'content': 'data(name)',
      'font-family': 'helvetica',
      'font-size': 14,
      'text-outline-width': 3,
      'text-outline-color': '#888',
      'text-valign': 'center',
      'color': '#fff',
      'width': 'mapData(weight, 30, 80, 20, 50)',
      'height': 'mapData(height, 0, 200, 10, 45)',
      'border-color': '#fff'
    })
  .selector(':selected')
    .css({
      'background-color': '#000',
      'line-color': '#000',
      'target-arrow-color': '#000',
      'text-outline-color': '#000'
    })
  .selector('edge')
    .css({
      'width': 2,
      'target-arrow-shape': 'triangle'
    })
,

ready: function(){
  cy = this;
  cy.load({
     nodes: [
      { data: { id: "n1" } },
      { data: { id: "n2" } }
      ],
     edges: [
      { data: { id: "e1", source: "n1", target: "n2" } }
      ]
    }) 
 }
 };

  $('#cy').cytoscape(options);

     });

但我想知道是否有一种方法可以在文档上准备好其他所有内容,然后单击按钮访问 cy.load?

例如:

<script>
  $("#button").click( function()
  {
     cy.load(<data returned from server>)
  }
</script>

这是 HTML 代码。本质上,Cytoscape 在此 DIV 中绘制图表:

 <body>
   <div id="cy"></div>
 </body>

最佳答案

在您的示例中 var cy 未定义,因此 js 使用 id="cy"

获取 div

您需要添加此内容(如 documentation 中)

$("#cy").cytoscape(options);
var cy = $("#cy").cytoscape("get"); 

关于javascript - 如何从外部函数访问 'cy.load()' 等?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19287415/

相关文章:

javascript - WordPress在标题中自定义js

javascript - 从 Django 到 D3 图的 JSON 数据

JavaScript - for 循环不适用于 setCustomValidity

javascript - 将引导文本类交换为谷歌 Material 图标

javascript - innerHTML 和事件委托(delegate)

javascript - Material-UI 的 Dialog 如何允许对话框后面进行交互?

jquery - 当标记拖出多边形时发出警报

javascript - 是否可以将 iframe 值放在 textarea 中?

javascript - jQuery 用 live 替换绑定(bind)

javascript - JQuery 用户界面;停止可选事件的传播