武侠人物图 - 武侠小说关系可视化

武侠人物关系图

功能概述

这个创意示例演示了武侠小说中的人物关系图，显示人物、他们的门派、师徒关系和联盟。节点代表具有派系颜色的人物，连接显示家庭关系、师徒和敌对关系。

核心特性实现

人物节点创建

const createCharacterNode = (character: WuxiaCharacter) => ({
    id: character.name,
    text: character.name,
    color: getFactionColor(character.faction),
    data: {
        faction: character.faction,
        martialArts: character.martialArts,
        generation: character.generation
    }
});

关系连线

const relationshipTypes = {
    master: { color: '#FFD700', lineStyle: 'solid', width: 3 },
    disciple: { color: '#FFD700', lineStyle: 'dashed', width: 2 },
    family: { color: '#FF69B4', lineStyle: 'solid', width: 2 },
    rival: { color: '#FF0000', lineStyle: 'dotted', width: 1 },
    ally: { color: '#00FF00', lineStyle: 'solid', width: 1 }
};

const createRelationshipLine = (rel: Relationship) => {
    const type = relationshipTypes[rel.type];
    return {
        from: rel.from,
        to: rel.to,
        text: rel.type,
        color: type.color,
        lineStyle: type.lineStyle,
        lineWidth: type.width
    };
};

基于门派的布局

const organizeByFaction = () => {
    const factions = ['Shaolin', 'Wudang', 'Emei', 'Beggar Sect', 'Kunlun'];

    factions.forEach((faction, i) => {
        const factionMembers = graphInstance.getNodes().filter(
            n => n.data.faction === faction
        );
        // 在集群中定位门派成员
        positionFactionCluster(factionMembers, i);
    });
};

创意使用场景

文学分析：可视化小说中的人物关系。

游戏设计：RPG 的人物关系图。

讲故事：交互式叙事探索。

虚构宇宙：跟踪虚构世界中的连接。

教育工具：互动式教授复杂的故事线。