生肖配对 - 中国生肖关系计算器

中国生肖配对计算器

功能概述

这个创意示例演示了使用关系图的生肖配对计算器。每个生肖符号都是一个节点，兼容性分数显示为符号之间的连接。用户可以选择他们的生肖符号，并查看兼容、中性和不兼容匹配的可视化表示。

核心特性实现

生肖节点

const zodiacSigns = [
    { name: 'Rat', element: 'Water', icon: '🐭' },
    { name: 'Ox', element: 'Earth', icon: '🐮' },
    { name: 'Tiger', element: 'Wood', icon: '🐯' },
    { name: 'Rabbit', element: 'Wood', icon: '🐰' },
    { name: 'Dragon', element: 'Earth', icon: '🐲' },
    { name: 'Snake', element: 'Fire', icon: '🐍' },
    { name: 'Horse', element: 'Fire', icon: '🐴' },
    { name: 'Goat', element: 'Earth', icon: '🐐' },
    { name: 'Monkey', element: 'Metal', icon: '🐵' },
    { name: 'Rooster', element: 'Metal', icon: '🐔' },
    { name: 'Dog', element: 'Earth', icon: '🐶' },
    { name: 'Pig', element: 'Water', icon: '🐷' }
];

const createZodiacNode = (sign: ZodiacSign) => ({
    id: sign.name,
    text: `${sign.icon} ${sign.name}`,
    data: { element: sign.element }
});

兼容性连接

const getCompatibility = (sign1: string, sign2: string): CompatibilityScore => {
    // 三合（120°）：最兼容
    if (isTrine(sign1, sign2)) return { score: 100, label: 'Perfect Match' };

    // 六合（60°）：兼容
    if (isSextile(sign1, sign2)) return { score: 75, label: 'Good Match' };

    // 相冲（90°）：具有挑战性
    if (isSquare(sign1, sign2)) return { score: 25, label: 'Challenging' };

    // 对冲（180°）：最不兼容
    if (isOpposition(sign1, sign2)) return { score: 10, label: 'Difficult' };

    return { score: 50, label: 'Neutral' };
};

可视化表示

const createCompatibilityLine = (sign1: string, sign2: string) => {
    const compatibility = getCompatibility(sign1, sign2);

    return {
        from: sign1,
        to: sign2,
        text: `${compatibility.score}%`,
        color: getScoreColor(compatibility.score),
        lineWidth: compatibility.score / 25,
        opacity: compatibility.score / 100
    };
};

圆形布局

const layoutOptions = {
    layoutName: 'circle',
    radius: 300
};

创意使用场景

娱乐：有趣的生肖配对检查器。

文化教育：教授中国生肖系统。

约会应用：基于生肖符号的匹配。

社交游戏：聚会游戏和破冰活动。

文化研究：探索中国占星术传统。