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 событие, когда все элементы отображаются?

ответ

Смежные вопросы