React中vis.js Network操作工具栏自定义问题求助

一、自定义左上角添加节点/边按钮 #

vis.js默认操作工具栏无直接配置项支持自定义，可通过禁用默认按钮+自定义按钮绑定vis.js操作模式实现：

1. 修改配置，禁用默认按钮

const options = {
  interaction: { hover: true },
  manipulation: { 
    enabled: true, 
    addEdge: false, // 关闭默认添加边按钮
    addNode: false  // 关闭默认添加节点按钮
  },
  nodes: {
    borderWidth: 4,
    size: 30,
    color: {
      border: "#222222",
      background: "#666666",
    },
    font: { color: "#c51717" },
  },
  edges: {
    color: "lightgray",
  },
}

2. 在React组件中实现自定义工具栏并绑定操作

import { useEffect, useRef } from 'react';
import { Network } from 'vis-network';

function NetworkComponent({ data }) {
  const containerRef = useRef(null);
  const networkRef = useRef(null);

  useEffect(() => {
    if (containerRef.current) {
      networkRef.current = new Network(containerRef.current, data, options);
    }
  }, [data]);

  // 触发添加节点模式
  const handleAddNode = () => {
    networkRef.current.addNodeMode();
  };

  // 触发添加边模式
  const handleAddEdge = () => {
    networkRef.current.addEdgeMode();
  };

  return (
    <div style={{ position: 'relative' }}>
      {/* 自定义工具栏 */}
      <div className="custom-toolbar">
        <button onClick={handleAddNode}>添加节点</button>
        <button onClick={handleAddEdge}>添加连接</button>
      </div>
      {/* vis.js画布容器 */}
      <div ref={containerRef} style={{ width: '100%', height: '600px' }} />
    </div>
  );
}

3. 自定义工具栏样式（可选）

.custom-toolbar {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 1000;
}
.custom-toolbar button {
  margin-right: 8px;
  padding: 6px 12px;
  border: none;
  border-radius: 4px;
  background: #2385bb;
  color: #fff;
  cursor: pointer;
}

二、修改添加边时的提示文本 #

方案1：覆盖vis.js内置语言包（推荐） #

直接修改vis.js的国际化翻译文本，无需DOM操作：

import { Network } from 'vis-network';

// 在初始化Network前覆盖翻译
Network.prototype.translations.addEdge = '请先点击起始节点，再点击目标节点创建连接';
// 如需修改添加节点提示，可同步修改
// Network.prototype.translations.addNode = '点击画布空白处添加节点';

// 初始化Network
const network = new Network(container, data, options);

方案2：DOM操作修改提示元素 #

通过监听模式切换事件，动态修改生成的提示DOM：

useEffect(() => {
  if (!networkRef.current) return;
  
  const network = networkRef.current;
  
  // 进入添加边模式时修改提示
  network.on('addEdgeMode', () => {
    setTimeout(() => {
      const tooltip = document.querySelector('.vis-manipulation-tooltip');
      if (tooltip) {
        tooltip.innerHTML = '请点击两个节点完成连接创建';
      }
    }, 0); // 延迟确保DOM已生成
  });

  // 退出模式时重置提示（可选）
  network.on('exitEdgeMode', () => {
    const tooltip = document.querySelector('.vis-manipulation-tooltip');
    if (tooltip) tooltip.innerHTML = '';
  });

  return () => {
    network.off('addEdgeMode');
    network.off('exitEdgeMode');
  };
}, []);

内容的提问来源于stack exchange，提问作者gabriel delset