当某个物料断供，采购要问的第一个问题是：有没有能顶上的？"能顶上"不是靠人脑硬记，而是靠数据——规格参数、封装形式、电气特性、供货渠道的相似度叠加打分。把这些候选物料和它们之间的相似度摆成一张图，就得到了

：节点是物料，边是"可替代"关系，边的粗细代表有多像。 

但图一画出来就暴露一个难题：相似度是个连续数值，从 0.3 到 0.99 跨度不小，怎么让它"看得见"？只用线宽，细线会被背景吞掉；只用颜色，用户分不清哪条更粗。本文讲清相似度的建模与打分、边权重到视觉通道的多通道映射、前端渲染的映射函数与交互细节，并给出可直接复用的实现。 

一、替代关系：一条带分数的边 

替代物料不是"行或是不行"的二元判断，而是一个

问题。一颗芯片能否替代另一颗，要看封装是否一致、电压电流是否兼容、温度等级是否达标、供货周期是否可接受。每条边都应该挂一个 0~1 的相似度分数，这是整张图的灵魂。

图 1：物料为节点、替代关系为边，边上的分数代表可替代置信度，同一类物料聚成簇。

设计上建议把相似度拆成可解释的维度再加权，而不是一个黑盒分数： 

加权后的分数存入 Neo4j 边的属性 

，前端据此做视觉映射。这样分数不是玄学，业务方能问"为什么这条边这么粗"，工程师能答"封装兼容+参数接近，加权得出 0.88"。

二、相似度怎么算：从数据到分数 

后端把物料特征向量化后，用余弦相似度或 Jaccard 系数打分，再持久化到图。下面这段 Cypher 演示如何批量写入相似度边：

MATCH (a:Material), (b:Material)
WHERE id(a) < id(b)
  AND a.category = b.category
  AND a.package = b.package
WITH a, b,
     0.35 * algo.similarity.cosine(a.params, b.params) +
     0.25 * (CASE WHEN a.package = b.package THEN 1 ELSE 0 END) +
     0.20 * algo.similarity.jaccard(a.attrSet, b.attrSet) +
     0.20 * b.supplyScore AS score
WHERE score >= 0.5
MERGE (a)-[r:ALTERNATIVE]->(b)
SET r.similarity = score,
    r.calcDate = date()

三、边权重到视觉：多通道映射 

分数算出来了，怎么画才看得清？答案是

——同时用线宽、颜色和透明度三个视觉通道编码同一个数值，互为补充，避免单一通道失效。

图 2：同一数值分三路映射到不同视觉通道，叠加后辨识度大幅提升。

，最低 1px、最高 7px。线性保证"粗多少"与"像多少"成比例，用户能凭线宽估分数。

，而不是连续渐变——人眼对"红/橙/绿"的分档比连续色阶敏感得多：

。细线本来就细，再加半透明就彻底隐形了；低分边淡一点，既保留"存在"，又不抢视觉。

四、前端实现：映射函数与 Graphin 配置 

映射逻辑放在前端，好处是阈值可热调、不依赖后端重算。下面这段 JavaScript 同时处理线宽、颜色和透明度，并给出悬停查看分数的交互。

// 1. 阈值分档：分数 -> 颜色
function scoreToColor(s) {
  if (s >= 0.85) return '#e05b5b'; // 强替代
  if (s >= 0.65) return '#f5a623'; // 可用
  return '#9aa0a6';                // 勉强
}

// 2. 线性映射：分数 -> 线宽与透明度
function scoreToStyle(s) {
  return {
    lineWidth: 1 + s * 6,            // 1 ~ 7 px
    stroke: scoreToColor(s),
    opacity: 0.35 + s * 0.65         // 0.35 ~ 1
  };
}

// 3. 把 Neo4j 边数据转换成 Graphin 可消费的样式
function decorateEdges(edges) {
  return edges.map(e => ({
    ...e,
    style: scoreToStyle(e.properties.similarity)
  }));
}

// 4. Graphin 节点与边的渲染配置
const config = {
  nodes: [/* ... */],
  edges: decorateEdges(rawEdges),
  edge: {
    type: 'line',
    style: { /* 默认样式由 decorateEdges 覆盖 */ }
  }
};

：鼠标移到边上时，弹出一个小 tooltip 显示 

 以及各维度明细（封装 1.0、参数 0.92…）。这让"为什么这么粗"可追问，是推荐系统可信度的关键。Graphin 的 

五、节点也要映射：推荐排序可视化 

边讲完了，节点不能只当挂件。物料节点的样式应当反映"它是被找的，还是用来找的"，以及"它有多少条强替代边"——

，让"替代品丰富的物料"自然变大。

图 3：节点大小随强替代边数量增长，源头节点加描边突出。

源头物料（用户正在找替代的那颗）用深色填充加外圈描边，替代候选按分数高低排在它周围，配合力导向布局让高分边被拉得更近、更粗、更红——

，用户一眼锁定"最像的那几颗"。

六、规模与性能：别让密集图糊掉 

物料上千、替代关系上万时，全量展示必然糊成毛线团。三个实用的降噪策略：

图 4：阈值过滤 + Top-K 截断 + 节点聚合三级降噪，保证图始终可读。

配合 Canvas 渲染（Graphin 默认）而非 SVG，上千节点依然流畅；边样式在 

 阶段算好缓存，避免每帧重算映射函数。

本文围绕"替代物料推荐图：相似度边权重的可视化映射"展开，从替代关系的语义与打分维度讲起，给出 Neo4j 批量建边并写入相似度分数的 Cypher，落地了线宽、颜色、透明度三通道叠加的映射方案，并补充了悬停追问、节点大小映射与规模化降噪策略。 

当某个物料断供，采购要问的第一个问题是：有没有能顶上的？"能顶上"不是靠人脑硬记，而是靠数据——规格参数、封装形式、电气特性、供货渠道的相似度叠加打分。把这些候选物料和它们之间的相似度摆成一张图，就得到了替代物料推荐图：节点是物料，边是"可替代"关系，边的粗细代表有多像。 

供应链知识图谱 | 替代物料推荐图：相似度边权重的可视化映射

当某个物料断供，采购要问的第一个问题是：有没有能顶上的？"能顶上"不是靠人脑硬记，而是靠数据——规格参数、封装形式、电气特性、供货渠道的相似度叠加打分。把这些候选物料和它们之间的相似度摆成一张图，就得到了替代物料推荐图：节点是物料，边是"可替代"关系，边的粗细代表有多像。

前端开发

人工智能

基于相似度打分构建替代物料推荐图，采用线宽、颜色、透明度三通道编码边权重，结合Neo4j批量建边与Graphin前端映射，实现可视化降噪与悬停追问，提升物料替代推荐的可读性与可信度。

数据转换

JavaScript

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

EdgeOne AI 安全实战专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

供应链知识图谱 | 替代物料推荐图：相似度边权重的可视化映射

供应链知识图谱 | 替代物料推荐图：相似度边权重的可视化映射

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐