Question

有没有一种方法可以随时切换覆盖？例如，我希望所有节点都具有红色覆盖。我以自己的风格尝试过overlay-color，但是只有当覆盖层处于活动状态时（即我将其拖动时）才会显示。我看着这个post，但我仍然不知道如何实现它。完整的样式如下所示：

{
    selector: 'node',
    css: {
    content: 'data(id)',
    'text-valign': 'bottom',
    'text-halign': 'center',
    height: '60px',
    width: '60px',
    'border-color': 'black',
    'border-opacity': '1',
    'background-image':
        'https://farm8.staticflickr.com/7272/7633179468_3e19e45a0c_b.jpg',
    'overlay-color': 'red',
    },
},

非常感谢！

Answer 1

您链接的帖子包含解决问题的方法：

如果不确定默认值是什么，请不要跳过属性。通常，应该像对dom中的CSS一样明确指定每个属性对您的应用程序是否重要。

这可以归结为简单地添加缺少的overlay-*属性，即：

overlay-opacity
overlay-padding

以下代码片段显示了带有节点样式的dagre图：

var cy = window.cy = cytoscape({
  container: document.getElementById('cy'),

  boxSelectionEnabled: false,
  autounselectify: true,

  style: [{
      selector: 'node',
      css: {

        'content': 'data(id)',
        'text-valign': 'bottom',
        'text-halign': 'center',
        'height': '60px',
        'width': '60px',
        'border-color': 'black',
        'border-opacity': '1',
        'padding': '4',
        'background-image': 'https://farm8.staticflickr.com/7272/7633179468_3e19e45a0c_b.jpg',
        'overlay-color': 'red',
        'overlay-opacity': 0.35,
        'overlay-padding': '5',
      }
    },
    {
      selector: 'edge',
      css: {
        'target-arrow-shape': 'triangle'
      }
    },
  ],

  elements: {
    nodes: [{
        data: {
          id: 'n0'
        }
      },
      {
        data: {
          id: 'n1'
        }
      },
      {
        data: {
          id: 'n2'
        }
      },
      {
        data: {
          id: 'n3'
        }
      },
      {
        data: {
          id: 'n4'
        }
      },
      {
        data: {
          id: 'n5'
        }
      },
      {
        data: {
          id: 'n6'
        }
      },
      {
        data: {
          id: 'n7'
        }
      },
      {
        data: {
          id: 'n8'
        }
      },
      {
        data: {
          id: 'n9'
        }
      },
      {
        data: {
          id: 'n10'
        }
      },
      {
        data: {
          id: 'n11'
        }
      },
      {
        data: {
          id: 'n12'
        }
      },
      {
        data: {
          id: 'n13'
        }
      },
      {
        data: {
          id: 'n14'
        }
      },
      {
        data: {
          id: 'n15'
        }
      },
      {
        data: {
          id: 'n16'
        }
      }
    ],
    edges: [{
        data: {
          source: 'n0',
          target: 'n1'
        }
      },
      {
        data: {
          source: 'n1',
          target: 'n2'
        }
      },
      {
        data: {
          source: 'n1',
          target: 'n3'
        }
      },
      {
        data: {
          source: 'n2',
          target: 'n7'
        }
      },
      {
        data: {
          source: 'n2',
          target: 'n11'
        }
      },
      {
        data: {
          source: 'n2',
          target: 'n16'
        }
      },
      {
        data: {
          source: 'n3',
          target: 'n4'
        }
      },
      {
        data: {
          source: 'n3',
          target: 'n16'
        }
      },
      {
        data: {
          source: 'n4',
          target: 'n5'
        }
      },
      {
        data: {
          source: 'n4',
          target: 'n6'
        }
      },
      {
        data: {
          source: 'n6',
          target: 'n8'
        }
      },
      {
        data: {
          source: 'n8',
          target: 'n9'
        }
      },
      {
        data: {
          source: 'n8',
          target: 'n10'
        }
      },
      {
        data: {
          source: 'n11',
          target: 'n12'
        }
      },
      {
        data: {
          source: 'n12',
          target: 'n13'
        }
      },
      {
        data: {
          source: 'n13',
          target: 'n14'
        }
      },
      {
        data: {
          source: 'n13',
          target: 'n15'
        }
      },
    ]
  },

  layout: {
    name: 'dagre',
    padding: 5
  }
});
let toggle = true

cy.on('click', function() {
  //toggle between invisible/visible overlay
  let value = toggle ? 0 : 0.35;
  toggle = !toggle;
  cy.nodes().style({
    'overlay-opacity': value
  });
});

body {
  font: 14px helvetica neue, helvetica, arial, sans-serif;
}

#cy {
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  float: left;
  position: absolute;
}

<html>

<head>
  <meta charset=utf-8 />
  <meta name="viewport" content="user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, minimal-ui">
  <script src="https://unpkg.com/cytoscape@3.3.0/dist/cytoscape.min.js">
  </script>
  <script src="https://unpkg.com/jquery@3.3.1/dist/jquery.js"></script>
  <!-- cyposcape dagre -->
  <script src="https://unpkg.com/dagre@0.7.4/dist/dagre.js"></script>
  <script src="https://cdn.rawgit.com/cytoscape/cytoscape.js-dagre/1.5.0/cytoscape-dagre.js"></script>
</head>

<body>
  <div id="cy"></div>
</body>

</html>

有什么方法可以随时在cytoscape.js中显示叠加图吗？

1 个答案: