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

本文链接：https://blog.csdn.net/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',
							css: {
								'content': 'data(name)'
							}
						},

						{
							selector: 'edge',
							css: {
								'curve-style': 'bezier',
								'target-arrow-shape': 'triangle'
							}
						}
					],

					elements: {
						nodes: [
							{ data: { id: 'j', name: 'Jerry' } },
							{ data: { id: 'e', name: 'Elaine' } },
							{ data: { id: 'k', name: 'Kramer' } },
							{ data: { id: 'g', name: 'George' } }
						],
						edges: [
							{ data: { source: 'j', target: 'e' } },
							{ data: { source: 'j', target: 'k' } },
							{ data: { source: 'j', target: 'g' } },
							{ data: { source: 'e', target: 'j' } },
							{ data: { source: 'e', target: 'k' } },
							{ data: { source: 'k', target: 'j' } },
							{ data: { source: 'k', target: 'e' } },
							{ data: { source: 'k', target: 'g' } },
							{ data: { source: 'g', target: 'j' } }
						]
					}
				});

				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' );
							}
						}
					]
				});

			});
		</script>
	</head>

	<body>
		<h1>cytoscape-cxtmenu demo</h1>

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

	</body>

</html>

react版本

// 安装依赖：npm install cytoscape cytoscape-cxtmenu font-awesome
import React, { useEffect, useRef } from "react";
import cytoscape from "cytoscape";
import cxtmenu from "cytoscape-cxtmenu";
import "font-awesome/css/font-awesome.min.css";

// 注册 cxtmenu 插件
cytoscape.use(cxtmenu);

const CytoscapeDemo = () => {
  const cyRef = useRef(null); // 引用 DOM 容器

  useEffect(() => {
    // 初始化 Cytoscape 图
    const cy = cytoscape({
      container: cyRef.current, // 绑定到容器
      style: [
        {
          selector: "node",
          style: {
            content: "data(name)", // 显示节点的 `name` 属性
          },
        },
        {
          selector: "edge",
          style: {
            "curve-style": "bezier", // 曲线样式
            "target-arrow-shape": "triangle", // 目标箭头形状
          },
        },
      ],
      elements: {
        nodes: [
          { data: { id: "j", name: "Jerry" } },
          { data: { id: "e", name: "Elaine" } },
          { data: { id: "k", name: "Kramer" } },
          { data: { id: "g", name: "George" } },
        ],
        edges: [
          { data: { source: "j", target: "e" } },
          { data: { source: "j", target: "k" } },
          { data: { source: "j", target: "g" } },
          { data: { source: "e", target: "j" } },
          { data: { source: "e", target: "k" } },
          { data: { source: "k", target: "j" } },
          { data: { source: "k", target: "e" } },
          { data: { source: "k", target: "g" } },
          { data: { source: "g", target: "j" } },
        ],
      },
    });

    // 节点和边的上下文菜单
    cy.cxtmenu({
      selector: "node, edge", // 选择节点和边
      commands: [
        {
          content: '<span class="fa fa-flash fa-2x"></span>', // 图标内容
          select: (ele) => {
            console.log(ele.id()); // 打印元素的 ID
          },
        },
        {
          content: '<span class="fa fa-star fa-2x"></span>',
          select: (ele) => {
            console.log(ele.data("name")); // 打印元素的 `name` 属性
          },
          enabled: false, // 禁用此选项
        },
        {
          content: "Text",
          select: (ele) => {
            console.log(ele.position()); // 打印元素的位置
          },
        },
      ],
    });

    // 核心背景区域的上下文菜单
    cy.cxtmenu({
      selector: "core", // 选择背景
      commands: [
        {
          content: "bg1", // 背景选项 1
          select: () => {
            console.log("bg1");
          },
        },
        {
          content: "bg2", // 背景选项 2
          select: () => {
            console.log("bg2");
          },
        },
      ],
    });

    // 清理函数
    return () => cy.destroy();
  }, []);

  return (
    <div style={{ height: "100vh", width: "100%" }}>
      <h1 style={{ fontSize: "1em", opacity: 0.5 }}>Cytoscape-cxtmenu Demo</h1>
      <div
        id="cy"
        ref={cyRef}
        style={{
          height: "calc(100% - 2em)",
          width: "100%",
          position: "absolute",
          top: "2em",
        }}
      />
    </div>
  );
};

export default CytoscapeDemo;

API详解

// 初始化 Cytoscape 图
let cy = cytoscape({
  container: document.getElementById('cy'), // 渲染 Cytoscape 图的 DOM 容器，需在 HTML 中定义一个 id 为 "cy" 的元素
  /* ... 其他配置，例如节点、边数据和样式 ... */
});

// 定义上下文菜单的默认参数
let defaults = {
  menuRadius: function(ele) { 
    return 100; // 菜单半径，从节点中心到菜单边缘的像素值。这里是一个动态函数，可以根据元素自定义。
  },
  selector: 'node', // 指定哪些元素会触发菜单，这里是所有的节点（'node'）。
  commands: [ // 菜单项的配置，定义每个菜单的行为。
    /*
    { // 一个示例菜单项
      fillColor: 'rgba(200, 200, 200, 0.75)', // 设置菜单项的背景颜色，默认为半透明灰色。
      content: 'a command name', // 菜单项的文字内容，可以是 HTML 或纯文本。
      contentStyle: {}, // 可选：通过 CSS 的 key:value 格式自定义菜单项的样式。
      select: function(ele) { 
        console.log(ele.id()); // 当用户选择此菜单项时执行的函数，这里打印元素 ID。
      },
      hover: function(ele) { 
        console.log(ele.id()); // 当用户悬停在此菜单项时执行的函数。
      },
      enabled: true // 菜单项是否可以被选择。设置为 false 时此菜单项会变灰。
    }
    */
  ], 
  fillColor: 'rgba(0, 0, 0, 0.75)', // 菜单的背景颜色，默认为半透明黑色。
  activeFillColor: 'rgba(1, 105, 217, 0.75)', // 激活状态（选中菜单项）的背景颜色。
  activePadding: 20, // 选中菜单项的额外填充像素大小。
  indicatorSize: 24, // 指示器（当前选中项的小三角形）的大小。
  separatorWidth: 3, // 菜单项之间的分隔线宽度。
  spotlightPadding: 4, // 菜单与触发元素之间的额外间距。
  adaptativeNodeSpotlightRadius: false, // 是否根据节点大小动态调整菜单的聚光灯半径。
  minSpotlightRadius: 24, // 菜单最小聚光灯半径（节点的光圈）。
  maxSpotlightRadius: 38, // 菜单最大聚光灯半径。
  openMenuEvents: 'cxttapstart taphold', // 打开菜单的事件，这里是右键点击开始（`cxttapstart`）和长按（`taphold`）。
  itemColor: 'white', // 菜单项文字的颜色，默认为白色。
  itemTextShadowColor: 'transparent', // 菜单项文字阴影颜色，默认没有阴影。
  zIndex: 9999, // 菜单的 z-index，确保菜单显示在其他元素之上。
  atMouse: false, // 菜单是否在鼠标位置显示（`false` 表示以节点为中心）。
  outsideMenuCancel: false // 设置为数字时，光标离开指定距离会取消菜单。例如 `20` 表示 20px。
};

// 将上下文菜单绑定到 Cytoscape 图
let menu = cy.cxtmenu(defaults); // `cy.cxtmenu` 将菜单配置应用到 Cytoscape 实例中。

示例一：背景颜色

在这里插入图片描述

    cy.cxtmenu({
      selector: "node, edge", 
      commands: [
        {
          content: '<span class="fa fa-flash fa-2x"></span>', 
          select: (ele) => {
            console.log(ele.id());
          },
        },
        {
          content: '<span class="fa fa-star fa-2x"></span>',
          select: (ele) => {
            console.log(ele.data("name")); 
          },
          enabled: false,
        },
        {
          content: "Text",
          select: (ele) => {
            console.log(ele.position()); 
          },
        },
      ],fillColor: 'rgba(0, 0, 100, 0.75)', // 菜单的背景颜色修改
    });

示例二：添加菜单按钮

在这里插入图片描述

    cy.cxtmenu({
      selector: "node, edge", 
      commands: [
        {
          content: '<span class="fa fa-flash fa-2x"></span>',
          select: (ele) => {
            console.log(ele.id());
          },
        },
        {
          content: '<span class="fa fa-star fa-2x"></span>',
          select: (ele) => {
            console.log(ele.data("name")); 
          },
          enabled: false,
        },
        {
          content: "Text",
          select: (ele) => {
            console.log(ele.position()); 
          },
        },
        { // 添加菜单按钮
            content: "Text1",
            select: (ele) => {
              console.log(ele.position()); 
            },
          },
      ],
    });

示例三：自定义菜单项的样式

在这里插入图片描述

        {
            content: "Text1",
            contentStyle: {
                color: "red", // 自定义字体颜色
                fontSize: "20px", // 自定义字体大小
                textAlign: "center", // 居中对齐
              },
            select: (ele) => {
              console.log(ele.position()); 
            },
          },