lesson-knowledge-graph-ux-patterns-from-high-st.json

{
  "task_id": "lesson-knowledge-graph-ux-patterns-from-high-st",
  "title": "知识图谱 UX 增强: 从高星项目提炼的 7 个交互模式",
  "domain": "development",
  "tags": [
    "knowledge-graph",
    "d3js",
    "ux",
    "graph-visualization",
    "force-directed"
  ],
  "problem": "知识图谱可视化项目存在典型问题: 节点过多导致信息过载、关系缺乏上下文、无法聚焦局部视图。\n参考 GitHub 高星项目 (GraphRAG 25k⭐, Logseq 32k⭐, Cytoscape.js 10k⭐, react-force-graph 10k⭐) 的设计模式,\n提炼出 7 个可复用的交互增强方案。",
  "solution": "### 1. 局部图谱视图 (Logseq 模式)\n\n点击节点后只展示 N 跳邻居, 解决信息过载:\n\n```javascript\nfunction getNHopNeighbors(nodeId, hops, edges) {\n  const visited = new Set([nodeId]);\n  let frontier = [nodeId];\n  for (let i = 0; i < hops; i++) {\n    const next = new Set();\n    frontier.forEach(id => {\n      edges.forEach(e => {\n        const sid = e.source?.id || e.source;\n        const tid = e.target?.id || e.target;\n        if (sid === id && !visited.has(tid)) { next.add(tid); visited.add(tid); }\n        if (tid === id && !visited.has(sid)) { next.add(sid); visited.add(sid); }\n      });\n    });\n    frontier = [...next];\n  }\n  return visited;\n}\n```\n\n面包屑导航支持逐级返回: `全局图谱 > 节点A > 节点B`\n\n### 2. 社区聚类布局 (GraphRAG 模式)\n\n给 D3 force simulation 添加自定义聚类力:\n\n```javascript\nfunction forceCluster(nodes, getCategory) {\n  const clusterCenters = {};\n  const categories = [...new Set(nodes.map(n => getCategory(n)))];\n  const radius = 250;\n  categories.forEach((cat, i) => {\n    const angle = (2 * Math.PI * i) / categories.length;\n    clusterCenters[cat] = { x: Math.cos(angle) * radius, y: Math.sin(angle) * radius };\n  });\n  return alpha => {\n    nodes.forEach(d => {\n      const center = clusterCenters[getCategory(d)];\n      if (center) {\n        d.vx += (center.x - d.x) * alpha * 0.08;\n        d.vy += (center.y - d.y) * alpha * 0.08;\n      }\n    });\n  };\n}\n```\n\n同类节点间距缩小, 不同类间距增大, 形成视觉分组。\n\n### 3. 边悬浮 tooltip (Cytoscape 模式)\n\n用透明宽线条作为 hover 区域, 解决细线条难以 hover 的问题:\n\n```javascript\n// 透明 hover 区域 (12px 宽)\nlinkGroup.selectAll('.edge-hit-area').data(links).join('line')\n  .attr('class', 'edge-hit-area')  // stroke: transparent; stroke-width: 12;\n  .on('mouseover', showEdgeTooltip)\n  .on('mousemove', showEdgeTooltip)\n  .on('mouseout', hideEdgeTooltip);\n```\n\n### 4. 高级筛选器 (Logseq 模式)\n\n多维筛选: 节点类型 / 实体类型 / 分类, 加上孤立节点隐藏和核心节点高亮:\n\n```javascript\nfunction isNodeVisible(node, filterState) {\n  if (!filterState.types.has(node.type)) return false;\n  if (node.type === 'entity' && !filterState.entityTypes.has(node.entityType)) return false;\n  if ",
  "source": "lessons/contrib/knowledge-graph-ux-patterns-from-high-star-projects.md",
  "test_cmd": ""
}