當所有元素呈現時cytoscape js事件？

cy.add（元素）完成時是否發生事件？看起來每個元素都添加了一個事件，但是當所有元素都被添加和渲染時，我沒有看到一個事件。當所有元素呈現時cytoscape js事件？

例如：

var elements = [ { data: {id: 'n1'} }, { data: {id: 'n2'} }, { data: {id: 'n3'} }, ]; 
    cy.add(elements); 
    cy.on('add',function(evt){ 
    console.log('Element Added') 
    })

日誌將運行三次。

來源

2016-06-06 JLF

什麼是你想達到的實際效果？ – maxkfranz

我的應用程序具有其他進程，需要在所有元素添加完成後運行。主要更新表和圖形。這種情況經常發生，因爲我使用無頭圖進行計算並將結果傳輸到可見圖中， – JLF

更新我根據您的評論進行了重構。這將允許您在添加每個「批次」後檢測並執行某些操作。

我從一個來自cytoscape.js網站的例子開始，並大量編輯它以獲取此答案。

您可能想要全屏運行代碼段以同時查看畫布和控制檯。

// For generating new IDs 
 
var ids = []; 
 

 
function newId() { 
 
    if (!ids.length) { 
 
     ids.push('1'); 
 
    } else { 
 
     var id = '' + (parseInt(ids[ids.length - 1]) + 1); 
 
     ids.push(id); 
 
    } 
 
    return ids[ids.length - 1]; 
 
} 
 

 
// Draw for first time 
 
var cy = cytoscape({ 
 

 
    container: document.getElementById('cy'), 
 
    elements: [], // don't add elements initially 
 
    style: [{ 
 
     selector: 'node', 
 
     style: { 
 
      'background-color': '#666', 
 
      'label': 'data(id)', 
 
      'width': 10, 
 
      'height': 10 
 
     } 
 
    }, { 
 
     selector: 'edge', 
 
     style: { 
 
      'width': 3, 
 
      'line-color': '#ccc', 
 
      'target-arrow-color': '#ccc', 
 
      'target-arrow-shape': 'triangle' 
 
     } 
 
    }], 
 
    layout: { 
 
     name: 'grid', 
 
     rows: 1 
 
    } 
 
}); 
 

 
var batchTotal = 0; 
 
var totalAdded = 0; 
 

 
// Start listening to events 
 
cy.on('add', function(evt) { 
 
    console.log('event heard: add'); 
 
    if (totalAdded < batchTotal) { 
 
     totalAdded++; 
 
    } 
 
    console.log('totalAdded/batchTotal: ', totalAdded + '/' + batchTotal); 
 
    if (totalAdded == batchTotal) { 
 
     console.log('entire batch added'); 
 
     // do whatever you want! 
 
    } 
 
}); 
 

 
var xStart = 10; 
 
var x = xStart; 
 
var y = 40; 
 
var xInc = 20; 
 
var yInc = 30; 
 
var max = 200; 
 
var addTotal = 2; 
 

 
// For adding new elements 
 
function add() { 
 
    // let's build multiple elements to add at once 
 
    var elements = []; 
 
    var id; 
 
    var el; 
 
    for (var i = 0; i < addTotal; i++) { 
 
     id = newId(); 
 
     el = { 
 
      data: { 
 
       id: id 
 
      }, 
 
      position: { 
 
       x: x, 
 
       y: y 
 
      } 
 
     }; 
 
     elements.push(el); 
 
     if (x <= max) { 
 
      x += xInc; 
 
     } else { 
 
      x = xStart; 
 
      y += yInc; 
 
     } 
 
    } 
 
    addElements(elements); 
 
} 
 

 
// wrap the cy.add() method 
 
// so we can inject our total counter 
 
function addElements (elements) { 
 
    if (!Array.isArray(elements)) elements = [elements]; // convert to array 
 
    // this would be useful in a more robust app where 
 
    // addTotal may change 
 
    batchTotal = elements.length; 
 
    // reset 
 
    totalAdded = 0; 
 
    cy.add(elements); 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width"> 
 
    <title>CytoscapeJS Example</title> 
 
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape/2.7.0/cytoscape.js"></script> 
 
    <style type="text/css"> 
 
    #cy { 
 
     width: 300px; 
 
     height: 300px; 
 
     display: block; 
 
    } 
 
    </style> 
 
</head> 
 
<body> 
 
    <button onclick="add()">Add</button> 
 
    <p>Click add and watch the console. Look for the <strong>entire batch added</strong> message.</p> 
 
    <div id="cy"></div> 
 
    <script type="text/javascript" src="js/app.js"></script> 
 
</body> 
 
</html>

來源

2016-06-08 00:15:16

我認爲這不會起作用。任何呈現都會觸發此事件，而不僅僅是添加實體。運行佈局也會觸發onRender。 – JLF

@JLF請看最新的答案。我相信這就是你所追求的。 –

謝謝邁克。我擔心我不得不採取某種「事件」計數措施。我真的很希望我錯過了'所有元素都被添加'的事件，但我想這是一廂情願的想法。再次感謝您的摘錄。 – JLF

當所有元素呈現時cytoscape js事件？

回答

相關問題