Relation Graph

功能概述

此示例展示了如何创建手绘风格的图可视化，通过自定义节点渲染和 SVG 滤镜实现类似手绘的视觉效果。用户可以选择不同的边框样式（粗糙、铅笔、粗体）和背景纹理（纸张、阴影线、网格、点阵），让图表具有艺术感和人情味。

核心特性实现

手绘节点组件

创建 HandDrawnBox 组件实现手绘边框效果：

<HandDrawnBox variant={node.data.nodeBorderStyle} texture={node.data.nodeBackgroundStyle}>
    {nodeContent}
</HandDrawnBox>

组件根据选择的变体和纹理应用不同的 SVG 滤镜和样式。

样式切换控制

提供多个下拉选项控制手绘效果：

<SimpleUISelect data={[
    { value: 'rough', text: 'Rough' },
    { value: 'pencil', text: 'Pencil' },
    { value: 'thick', text: 'Thick' }
]} currentValue={nodeBorderStyle} onChange={setNodeBorderStyle} />

<SimpleUISelect data={[
    { value: 'none', text: 'None' },
    { value: 'paper', text: 'Paper' },
    { value: 'hatch', text: 'Hatch' },
    { value: 'grid', text: 'Grid' },
    { value: 'dots', text: 'Dots' }
]} currentValue={nodeBackgroundStyle} onChange={setNodeBackgroundStyle} />

用户可以独立控制边框样式和背景纹理。

动态样式更新

通过 updateNodeData 更新所有节点的样式：

const changeNodeHandDrawnStyle = async () => {
    graphInstance.getNodes().forEach(node => {
        graphInstance.updateNodeData(node, {
            nodeBorderStyle,
            nodeBackgroundStyle
        });
    });
    graphInstance.getLines().forEach(line => {
        graphInstance.updateLine(line, {
            lineShape: enableHandDrawn ? RGLineShape.Curve8 : RGLineShape.StandardStraight,
        });
    });
    await graphInstance.sleep(50);
    graphInstance.moveToCenter();
    graphInstance.zoomToFitWithAnimation();
};

样式更改后重新布局以确保节点正确显示。

条件渲染

根据是否启用手绘模式选择不同的节点组件：

<RGSlotOnNode>
    {({ node }) => {
        const nodeContent = <div>{/* 节点内容 */}</div>;
        if (enableHandDrawn) {
            return <HandDrawnBox variant={node.data.nodeBorderStyle} texture={node.data.nodeBackgroundStyle}>
                {nodeContent}
            </HandDrawnBox>
        } else {
            return <MyNodeContentBox>
                {nodeContent}
            </MyNodeContentBox>
        }
    }}
</RGSlotOnNode>

这允许用户在手绘和标准样式之间切换。

SVG 滤镜应用

使用 SVG 滤镜创建手绘效果：

<MySvgFilters />
<div className={`${enableHandDrawn ? 'node-filter-hand-drawn' : ''}`}>
    <RelationGraph />
</div>

CSS 类应用 SVG 滤镜到节点，创建粗糙边缘和手绘线条效果。

线条手绘偏移

为线条添加随机偏移以模拟手绘的不规则性：

myJsonData.lines.forEach(line => {
    line.fromJunctionPointOffsetX = Math.random() * 10;
    line.fromJunctionPointOffsetY = Math.random() * 10;
    line.toJunctionPointOffsetX = Math.random() * 10;
    line.toJunctionPointOffsetY = Math.random() * 10;
    line.junctionOffset = Math.random() * 20 - 10;
    line.endMarkerId = 'my-hand-drawn-arrow-end';
});

随机偏移使连接线看起来更像手绘。

创意使用场景

教育和培训材料

创建友好的、非正式的学习材料。手绘风格让复杂的图表更容易接受，减少学习压力。

创意演示

在演讲或演示中使用手绘风格增加创意和个性。特别适合设计、艺术或创意行业的展示。

草图和原型设计

快速创建概念草图或设计原型。手绘风格传达"这是初步想法"的信息，鼓励反馈和迭代。

儿童友好界面

为儿童教育应用创建友好的界面。手绘风格更符合儿童的审美和认知习惯。

故事板和场景规划

在故事板或场景规划中使用手绘风格的图表，保持草图的一致性和视觉连贯性。

白板和协作工具

模拟真实白板体验的数字协作工具。手绘风格让用户感觉像在使用真实白板。

创意写作和头脑风暴

在创意写作或头脑风暴会话中使用手绘风格的思维导图，激发创造力。

不完整和进行中的工作

使用手绘风格表示正在进行或未完成的工作，传达这是草图而非最终产品的信息。

个性化品牌

创建具有独特个性的品牌材料。手绘风格可以让品牌显得更亲切、更人性化。

数据可视化艺术

将数据可视化提升为艺术作品。手绘风格为冷冰冰的数据增添人情味和艺术感。

手绘风格

手绘风格可视化与 SVG 滤镜