javascript - cytoscape js框选择和突出显示

Question

例子中有3个节点，我用修改键+mousedown然后拖动，我可以选择2个节点并拖动它们，问题是我松开鼠标后，我看不到我选择了哪些节点。它们是不突出显示或使用阴影或反色或使用某些标记来标记它们已被选中。

<style>
    #cy{
        width:600px;
        height:800px
    }
</style>
<script src="cytoscape.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' }
    },
    { // edge ab
      data: { id: 'ab', source: 'a', target: 'b' }
    }
  ],

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

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

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

</script>

Answer 1

您可以将选定的节点存储在一个变量或数组中，然后添加一个 mouseUp 事件，您可以在该事件中突出显示所述变量或数组中的节点。

http://js.cytoscape.org/#events/user-input-device-events

在这里你可以找到 cytoscape 的绑定(bind)(总是在再次绑定(bind)之前解除绑定(bind)事件): http://js.cytoscape.org/#cy.on

cy.unbind('mouseup');
cy.bind('mouseup',/* 'node', */ function () {});