Question

cy.add（元素）完成时是否有事件发生？它似乎为添加的每个元素触发了一个事件，但是在添加和渲染所有元素时我没有看到事件。

前：

using System.ServiceModel;

namespace WcfCalculator
{
    [ServiceContract]
    public interface ICalculator
    {
        [OperationContract]
        double AddNumbers(double number1, double number2);
        [OperationContract]
        double SubstractNumbers(double number1, double number2);
        [OperationContract]
        double MultiplyNumbers(double number1, double number2);
        [OperationContract]
        double DivisionNumbers(double number1, double number2);
    }
}

日志将运行三次。

Answer 1

更新我根据您的评论进行了重构。这将允许您在每个＆＃34;批次＆＃34;之后检测并执行某些操作。已添加。

我从cytoscape.js网站上的一个例子开始，并为此答案进行了大量编辑。

您可能希望全屏运行代码段以同时查看画布和控制台。

＆＃13;

// 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);
}

＆＃13;

<!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>

＆＃13;

所有元素渲染时的cytoscape js事件？

1 个答案: