2

私は JavaScript と cytoscape.js ライブラリの両方に非常に慣れていません。私はサンプルコードをいじっていますが、基本的なことで立ち往生しています。

基本的に、私ができるようにしたいのは、基本的なオプションとスタイルをセットアップし、サーバーから返された JSON 構造からノードとエッジをロードできるようにすることです。以下のように、「準備完了」関数内から 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>
4

1 に答える 1

3

あなたの例var cyでは定義されていないため、jsはdivをフェッチしますid="cy"

これを追加する必要があります（ドキュメントのように）

$("#cy").cytoscape(options);
var cy = $("#cy").cytoscape("get");
于 2013-10-10T06:13:59.293 に答える