Question

我使用cytoscape js automove扩展，我可以将两个节点一起移动：

cy.automove({
    nodesMatching: cy.$('#a'),
    reposition: 'drag',
    dragWith: cy.$('#b')
});

但是我必须指定节点#a和#b，现在我需要移动任何节点，它的邻居一起移动，而不是特殊节点。

所以我试试这个：

<style>
    #cy{
        width:600px;
        height:800px
    }
</style>
<script src="cytoscape.js"></script>
<script src="cytoscape-automove.js"></script>
<div id="cy"></div>
<script>
var cy = cytoscape({

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

  elements: [ // list of graph elements to start with
    { // node a
      data: { id: 'a' }
    },
    { // node b
      data: { id: 'b' }
    },
    { // node c
      data: { id: 'c' }
    },
    { // node d
      data: { id: 'd' }
    },
    { // edge ab
      data: { id: 'ab', source: 'a', target: 'b' }
    },
    { // edge cd
      data: { id: 'cd', source: 'c', target: 'd' }
    }
  ],

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

    {
      selector: 'edge',
      style: {
        'width': 3,
        'line-color': '#ccc',
        'target-arrow-color': '#bcc',
        'target-arrow-shape': 'triangle'
      }
    }
  ],

  layout: {
    name: 'grid',
    rows: 1
  },
  boxSelectionEnabled:true,
   panningEnabled: true,
   selectionType:"additive"
});

cy.on("drag",function(evt){
    var node=evt.target;
    cy.automove({
        nodesMatching: node.neighbourhood().nodes(),
        reposition: 'drag',
        dragWith: node
    });
});
</script>

结果是，一旦我移动节点#a，节点#b将不会一起移动。但是我再次移动节点#a，移动#b但位置是错了，太过分了。

那么dragWith必须是一个特殊的吗？如果我想移动任何一个怎么办？

Answer 1

这个怎么样：

var i = 0;
cy.unbind("tapdrag");
cy.unbind("tapend");

cy.bind("tapdrag", "node", function(evt){
    if (i = 0) {
        i = 1;
        var node = evt.target;
        var target = cy.edges("[source = '" + node.id() + "']").target();
        cy.automove({
             nodesMatching: target,
             reposition: 'drag',
             dragWith: node
        });
    }
});

cy.bind("tapend", "node", function(evt) {
    i = 0;
});

如何自动移动cytoscape js中的任何节点

1 个答案: