2017-08-10 8 views
0

フロントエンドの開発は私の強力なスイートではなく、私はおそらく明らかに何かに固執しています。未定義の 'apply'プロパティを読み取ることができません

私は働くJSONファイルからのノードの1セットをロードしようとしているが、私は別のJSONファイルから新しいノードを追加しているときにこのエラーがスローされます:それはいくつかの

Uncaught TypeError: Cannot read property 'apply' of undefined 
at updateStyle (cytoscape.min.js:27) 
at a.c.restore (cytoscape.min.js:27) 
at a (cytoscape.min.js:27) 
at u.add (cytoscape.min.js:27) 
at HTMLDocument.<anonymous> (?q=:42) 
at j (jquery-3.2.1.min.js:2) 
at k (jquery-3.2.1.min.js:2) 

ですが紛争の一種?コードに誤りがありますか?

HTML:

<html> 
<head> 
    <script 
      src="http://code.jquery.com/jquery-3.2.1.min.js" 
      integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" 
      crossorigin="anonymous"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape/3.1.4/cytoscape.min.js"></script> 
    <style> 
     body { 
      width: 100%; 
      height: 100%; 
     } 
     #cy { 
      width: 100%; 
      height: 100%; 
      display: block; 
     } 
    </style> 
    <script> 
     $(document).ready(function() { 

      var data = $.getJSON('example.json'); 
      var data2 = $.getJSON('example2.json'); 

      var cy = window.cy = cytoscape({ 
       container: document.getElementById('cy'), 
       elements: data, 

       style: [{ 
        // This is now essentially your default for the graph 
        selector: 'node', 
        style: { 
         'background-color': '#666', 
         'label': 'data(id)' 
        } 
       }], 
       layout: { 
        name: 'grid' 
       } 
      }); 

      cy.add({ 
       data: data2 
      }); 
     }); 
    </script> 
</head> 
<body> 
<div id="cy"></div> 
</body> 

がexample.json:

[ 
{ 
    "data": { "id": "a" } 
}, 
{ 
    "data": { "id": "b" } 
}, 
{ 
    "data": { "id": "ab", "source": "a", "target": "b" } 
} 
] 

example2.json:

[ 
{ 
    "data": { "id": "c" } 
}, 
{ 
    "data": { "id": "d" } 
}, 
{ 
    "data": { "id": "ac", "source": "a", "target": "c" } 
} 
] 
+1

私は 'data'と' data2'はあなたが思うものを含んでいないと思います。 http://api.jquery.com/jQuery.getJSON –

+0

^Deferredオブジェクト/ jqXHRオブジェクトが含まれている可能性があります。 – adeneo

答えて

0

便宜上、Cytoscapeはthennableインターフェースとの約束(何も指定することができます)initでの要素とスタイル。いずれの場合も、非同期である可能性があるため、Initは非同期にすることができます。

グラフの操作では、約束事に合格することはできません。これはすべての基本的な操作を非同期にしてしまい、ユーザーにとって操作が複雑になります。

あなたは約束に慣れていない場合は、MDNを見てみましょう:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise

例えばpromise.then(resolvedValue => doSomethingWith(resolvedValue));

関連する問題