Question

我的设置是在线创建图形，然后获取新图形（通过Ajax调用服务器）并使用它来更新在线图形。例如，我可能只想包含两个图中的那些节点。

我想使用内置的set函数（这里：http://js.cytoscape.org/#collection/building--filtering）来操作旧图和新图，但我需要两个集合来完成它。如果我将新图表添加到cy对象集合中，则会立即绘制节点，并且我无法将它们作为新集合引用。

我的解决方案是拥有一个单独的cy对象，然后在这两个集合之间使用set操作。但正如我的例子所示，它没有按预期工作。这不仅仅是动画，这只是一个玩具用例。我可能想要删除这些节点，或将它们移动到特定位置。

出于某种原因，这不起作用。也就是说，just2并没有像我希望的那样变成蓝色。任何人都可以解释为什么不，以及我需要做些什么来解决它？

var cy = cytoscape({

    container: document.getElementById('cy'), // container to render in

    style: [ // the stylesheet for the graph
        {
            selector: 'node',
            style: {
                'background-color': '#666',
                'label': 'data(id)'
            }
        },
    ],

    elements: {
        nodes: [
            { data: { id: 'n0' } },
            { data: { id: 'n1' } },
            { data: { id: 'n2' } },

        ],
            edges: [
            { data: { source: 'n0', target: 'n1' } },
            { data: { source: 'n1', target: 'n2' } }
        ]
    },
    layout: {
        name: 'grid'
    },

});

// Add new data here -- potentially the result of an Ajax call.
var newarray = [
    { data: { id: 'n0' } },
    { data: { id: 'n8' } },
    { data: { id: 'n9' } },
    { data: { source: 'n8', target: 'n9' } },
];

var cy2 = cytoscape(
    {
        elements: newarray,
        headless: true,
        renderer: { name: null }
    });

var el = cy.elements();
var cy2el = cy2.elements();

var both = el.intersection(cy2el);
var justel = el.difference(cy2el);
var just2 = cy2el.difference(el);

cy.add(cy2el);

// This works.
both.animate({
    style: { "background-color" : "yellow" }
}, {
    duration: 500,
});

// This works. 
justel.animate({
    style: { "background-color" : "red" }
}, {
    duration: 500,
});

// This does not work.
just2.animate({
    style: { "background-color" : "blue" }
}, {
    duration: 500,
});

Answer 1

我回答问题时比较新...所以我希望我通过添加另一个答案而不是完全改变第一个答案来正确地做到这一点......

鉴于您的澄清，似乎最好，最有效和最合理的方法是只使用一个图表并随时添加新数据。如果添加一个标识批处理或更新的数据元素，那么只需使用新的选择器就可以完成您想要执行的所有操作，您可以根据需要随时添加。这个例子对你有意义吗？

function func(input) {
return input--; //input is now input-1
}

Answer 2

这里可能有两件事，但你的问题不够明确，无法知道你究竟想要完成什么。您只是尝试创建一个图并向其添加节点/边缘吗？

要解决您所说的问题与just2.animate不兼容，您使用了错误的功能。 Animate不适用于动画样式过渡。对于该用例，您只需使用此处的过渡动画属性添加到样式表：http://js.cytoscape.org/#style/transition-animation。

对于更大的问题......您是否有意创建两个单独的图表，然后将两者结合使用？或者你打算创建一个单独的图形并添加元素，第二批元素的颜色与第一批不同？

如果是后者，那么你可以简单地将newArray元素添加到第一个cytoscape实例中，并使用另一个样式选择器为它们提供不同的颜色。

如果您可以更加具体地了解您要完成的任务，那么帮助您会更容易。

在Cytoscape.js中动态添加数据

2 个答案: