nodejs25: 图数据绘制库(知识图谱可视化) Cytoscape.js的节点操作菜单插件

本文链接：https://blog.youkuaiyun.com/ResumeProject/article/details/143985495

Cytoscape.js的节点操作菜单插件

此扩展创建了一个小组件，允许用户在 Cytoscape.js 中的节点上操作循环上下文菜单。用户沿圆形菜单滑动以选择菜单项，并在节点、边缘或图形背景上执行命令。

官方示例

在这里插入图片描述

cy.cxtmenu({
   
   
	selector: 'node, edge',

	commands: [
		{
   
   
			content: '<span class="fa fa-flash fa-2x"></span>',
			select: function(ele){
   
   
				console.log( ele.id() );
			}
		},

		{
   
   
			content: '<span class="fa fa-star fa-2x"></span>',
			select: function(ele){
   
   
				console.log( ele.data('name') );
			},
			enabled: false
		},

		{
   
   
			content: 'Text',
			select: function(ele){
   
   
				console.log( ele.position() );
			}
		}
	]
});

在这里插入图片描述

	cy.cxtmenu({
   
   
		selector: 'core',

		commands: [
			{
   
   
				content: 'bg1',
				select: function(){
   
   
					console.log( 'bg1' );
				}
			},

			{
   
   
				content: 'bg2',
				select: function(){
   
   
					console.log( 'bg2' );
				}
			}
		]
	});

});

完整示例代码

https://github.com/cytoscape/cytoscape.js-cxtmenu/blob/master/demo.html

<!DOCTYPE html>

<html>

	<head>
		<title>cytoscape-cxtmenu.js demo</title>

		<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">

		<link href="https://unpkg.com/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
		<script src="https://unpkg.com/cytoscape/dist/cytoscape.min.js"></script>

		<!-- for testing with local version of cytoscape.js -->
		<!--<script src="../cytoscape.js/build/cytoscape.js"></script>-->

		<script src="cytoscape-cxtmenu.js"></script>

		<style>
			body {
   
   
				font-family: helvetica;
				font-size: 14px;
				overflow: hidden;
			}

			#cy {
     
     
				width: 100%;
				height: 100%;
				position: absolute;
				left: 0;
				top: 0;
				z-index: 999;
			}

			h1 {
   
   
				opacity: 0.5;
				font-size: 1em;
			}

			/* you can set the disabled style how you like on the text/icon */
			.cxtmenu-disabled {
   
   
				opacity: 0.333;
			}
		</style>

		<script>
			window.addEventListener('DOMContentLoaded', function(){
   
   

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

					ready: function(){
   
   
					},

					style: [
						{
   
   
							selector: 'node'