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的绑定（在绑定它们之前总是取消绑定事件）： http://js.cytoscape.org/#cy.on

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

cytoscape js盒子的选择和亮点

1 个答案: