我想在cytoscape.js中是否有办法显示覆盖？

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-*
• overlay-opacity

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

overlay-padding

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;
}