Relation Graph

功能概述

此示例演示了 junctionOffset 功能，它控制线端和节点边界之间的距离。默认情况下，线条直接连接到节点边缘，但此演示展示了添加偏移量如何在线条和节点之间创建可见的间隙。这对于提高视觉清晰度、避免与节点装饰重叠或实现线条应"浮动"在节点附近而不是直接附加到它们的特定样式效果特别有用。

核心特性实现

线端偏移配置

核心功能是能够在线端和节点边界之间设置间隙：

const applyMyOptions = () => {
    const lines = graphInstance.getLines();
    lines.forEach(line => {
        graphInstance.updateLine(line.id, {
            junctionOffset: gapOfLineAndNode
        });
    });
};

junctionOffset 属性在线端和节点之间创建间隙。正值将线端推离节点，而负值允许线条延伸到节点中。

交互式滑块控制

用户可以使用滑块实时调整间隙：

<input
    type="range"
    min="-10"
    max="30"
    value={gapOfLineAndNode}
    className="w-full"
    onChange={(e) => { setGapOfLineAndNode(Number(e.target.value)); }}
/>

滑块允许从 -10（线条略微延伸到节点中）到 30（大间隙）的值，并提供即时视觉反馈。

使用 useEffect 的响应式更新

每当状态更改时都会自动应用间隙：

useEffect(() => {
    applyMyOptions();
}, [gapOfLineAndNode]);

这确保当滑块移动时所有线条都立即更新。

多种布局类型演示

该演示展示了两种不同的布局算法与间隙功能一起使用：

// 树布局
const myTreeLayout = graphInstance.createLayout({
    layoutName: 'tree',
    from: 'left',
    treeNodeGapH: 200,
    treeNodeGapV: 30
});

// 中心布局
const myCenterLayout = graphInstance.createLayout({
    layoutName: 'center'
});

这表明 junctionOffset 功能适用于任何布局类型。

透明节点样式

节点使用透明度样式，以使线间隙更可见：

node.opacity = 0.5;
node.color = 'transparent';

这种样式选择帮助用户清楚地看到线条相对于节点边界终止的位置。

创意使用场景

建筑和工程图表

在技术图中使用，其中线条代表抽象连接（如数据流或关系），不应在视觉上与物理元素（节点）合并。间隙在逻辑连接和物理实体之间创建视觉分离。

浮动连接的心智映射

创建心智地图，其中想法（节点）与其关系（线条）不同。浮动连接样式可以更容易地区分概念与其关联，特别是在复杂的地图中。

电路和原理图

适应于原理图，其中导线需要在组件附近连接但不直接连接到它们，或者您想要显示与物理连接分开的逻辑关系。间隙可以代表接口边界或抽象层。

网络拓扑可视化

在网络图中使用，其中间隙代表连接实体之间的协议层、防火墙或其他中介。这在视觉上强化了节点之间存在边界或转换。

教育图表

创建教育材料，其中间隙帮助学生区分实体及其关系。例如，在生物学中，显示生物与其生态关系分开，或在化学中，显示分子与反应路径分开。

艺术和风格化可视化

将间隙功能用于艺术效果，创建具有现代、极简美学的图表，其中线条似乎磁性地浮动在节点附近。这可以创造更空灵或抽象的视觉风格。

集群边界指示

使用负间隙（线条延伸到节点中）以视觉上指示集群成员身份或包含关系。延伸过节点边界的线条可以暗示节点是更大分组或系统的一部分。

线条端点与节点的间隙