cytoscape js框选择和突出显示

Question

示例中有3个节点，我用修饰键+mousedown然后拖动，我可以select2个节点并拖动它们，问题是我松开鼠标后，我看不到哪些节点我有 selected.They 没有突出显示或带有阴影或反转颜色或带有一些标记以标记它们是 selected。

<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 的绑定（总是在再次绑定事件之前解除绑定）： http://js.cytoscape.org/#cy.on

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

cytoscape js框选择和突出显示

cytoscape js box selection and highlight

javascript

cytoscape.js