|
|
@@ -0,0 +1,2832 @@
|
|
|
+#!/usr/bin/env python3
|
|
|
+# -*- coding: utf-8 -*-
|
|
|
+"""
|
|
|
+将匹配图谱数据可视化为交互式HTML文件
|
|
|
+
|
|
|
+输入:match_graph目录下的JSON文件
|
|
|
+输出:单个HTML文件,包含所有帖子的图谱,可通过Tab切换
|
|
|
+"""
|
|
|
+
|
|
|
+import json
|
|
|
+from pathlib import Path
|
|
|
+from typing import Dict, List
|
|
|
+import sys
|
|
|
+
|
|
|
+# 添加项目根目录到路径
|
|
|
+project_root = Path(__file__).parent.parent.parent
|
|
|
+sys.path.insert(0, str(project_root))
|
|
|
+
|
|
|
+from script.data_processing.path_config import PathConfig
|
|
|
+
|
|
|
+
|
|
|
+HTML_TEMPLATE = '''<!DOCTYPE html>
|
|
|
+<html lang="zh-CN">
|
|
|
+<head>
|
|
|
+ <meta charset="UTF-8">
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
+ <title>匹配图谱可视化</title>
|
|
|
+ <script src="https://d3js.org/d3.v7.min.js"></script>
|
|
|
+ <style>
|
|
|
+ * {{
|
|
|
+ margin: 0;
|
|
|
+ padding: 0;
|
|
|
+ box-sizing: border-box;
|
|
|
+ }}
|
|
|
+ body {{
|
|
|
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
|
|
+ background: #1a1a2e;
|
|
|
+ color: #eee;
|
|
|
+ overflow: hidden;
|
|
|
+ }}
|
|
|
+ #container {{
|
|
|
+ display: flex;
|
|
|
+ height: 100vh;
|
|
|
+ flex-direction: column;
|
|
|
+ }}
|
|
|
+
|
|
|
+ /* Tab样式 */
|
|
|
+ .tabs {{
|
|
|
+ display: flex;
|
|
|
+ background: #0f3460;
|
|
|
+ padding: 0 20px;
|
|
|
+ overflow-x: auto;
|
|
|
+ flex-shrink: 0;
|
|
|
+ }}
|
|
|
+ .tab {{
|
|
|
+ padding: 12px 20px;
|
|
|
+ cursor: pointer;
|
|
|
+ border-bottom: 3px solid transparent;
|
|
|
+ white-space: nowrap;
|
|
|
+ font-size: 13px;
|
|
|
+ color: #888;
|
|
|
+ transition: all 0.2s;
|
|
|
+ }}
|
|
|
+ .tab:hover {{
|
|
|
+ color: #fff;
|
|
|
+ background: rgba(255,255,255,0.05);
|
|
|
+ }}
|
|
|
+ .tab.active {{
|
|
|
+ color: #e94560;
|
|
|
+ border-bottom-color: #e94560;
|
|
|
+ background: rgba(233, 69, 96, 0.1);
|
|
|
+ }}
|
|
|
+
|
|
|
+ /* 主内容区 */
|
|
|
+ .main-content {{
|
|
|
+ display: flex;
|
|
|
+ flex: 1;
|
|
|
+ overflow: hidden;
|
|
|
+ }}
|
|
|
+ #graph {{
|
|
|
+ flex: 1;
|
|
|
+ position: relative;
|
|
|
+ overflow: auto;
|
|
|
+ }}
|
|
|
+ #sidebar {{
|
|
|
+ width: 300px;
|
|
|
+ background: #16213e;
|
|
|
+ padding: 15px;
|
|
|
+ overflow-y: auto;
|
|
|
+ border-left: 1px solid #0f3460;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ }}
|
|
|
+ #persona-tree-panel {{
|
|
|
+ flex: 1;
|
|
|
+ overflow-y: auto;
|
|
|
+ margin-top: 15px;
|
|
|
+ border-top: 1px solid #0f3460;
|
|
|
+ padding-top: 10px;
|
|
|
+ }}
|
|
|
+ .tree-dimension {{
|
|
|
+ margin-bottom: 15px;
|
|
|
+ }}
|
|
|
+ .tree-dimension-title {{
|
|
|
+ font-size: 12px;
|
|
|
+ font-weight: bold;
|
|
|
+ padding: 5px 8px;
|
|
|
+ border-radius: 4px;
|
|
|
+ margin-bottom: 5px;
|
|
|
+ cursor: pointer;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 5px;
|
|
|
+ }}
|
|
|
+ .tree-dimension-title:hover {{
|
|
|
+ opacity: 0.8;
|
|
|
+ }}
|
|
|
+ .tree-dimension-title .toggle {{
|
|
|
+ font-size: 10px;
|
|
|
+ transition: transform 0.2s;
|
|
|
+ }}
|
|
|
+ .tree-dimension-title.collapsed .toggle {{
|
|
|
+ transform: rotate(-90deg);
|
|
|
+ }}
|
|
|
+ .tree-dimension.inspiration .tree-dimension-title {{
|
|
|
+ background: rgba(243, 156, 18, 0.2);
|
|
|
+ color: #f39c12;
|
|
|
+ }}
|
|
|
+ .tree-dimension.purpose .tree-dimension-title {{
|
|
|
+ background: rgba(52, 152, 219, 0.2);
|
|
|
+ color: #3498db;
|
|
|
+ }}
|
|
|
+ .tree-dimension.key .tree-dimension-title {{
|
|
|
+ background: rgba(155, 89, 182, 0.2);
|
|
|
+ color: #9b59b6;
|
|
|
+ }}
|
|
|
+ .tree-list {{
|
|
|
+ list-style: none;
|
|
|
+ padding-left: 0;
|
|
|
+ margin: 0;
|
|
|
+ font-size: 11px;
|
|
|
+ }}
|
|
|
+ .tree-list.collapsed {{
|
|
|
+ display: none;
|
|
|
+ }}
|
|
|
+ .tree-item {{
|
|
|
+ padding: 3px 0;
|
|
|
+ color: #aaa;
|
|
|
+ cursor: pointer;
|
|
|
+ border-radius: 3px;
|
|
|
+ padding: 3px 6px;
|
|
|
+ margin: 1px 0;
|
|
|
+ }}
|
|
|
+ .tree-item:hover {{
|
|
|
+ background: rgba(255,255,255,0.08);
|
|
|
+ color: #fff;
|
|
|
+ }}
|
|
|
+ .tree-item.matched {{
|
|
|
+ color: #2ecc71;
|
|
|
+ font-weight: 500;
|
|
|
+ }}
|
|
|
+ .tree-item .indent {{
|
|
|
+ display: inline-block;
|
|
|
+ width: 12px;
|
|
|
+ color: #555;
|
|
|
+ }}
|
|
|
+ h1 {{
|
|
|
+ font-size: 15px;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ color: #e94560;
|
|
|
+ }}
|
|
|
+ h2 {{
|
|
|
+ font-size: 12px;
|
|
|
+ margin: 10px 0 6px;
|
|
|
+ color: #0f9b8e;
|
|
|
+ }}
|
|
|
+ .legend {{
|
|
|
+ margin-top: 10px;
|
|
|
+ }}
|
|
|
+ .legend-grid {{
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: 1fr 1fr;
|
|
|
+ gap: 4px 8px;
|
|
|
+ }}
|
|
|
+ .legend-item {{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ font-size: 11px;
|
|
|
+ }}
|
|
|
+ .legend-color {{
|
|
|
+ width: 12px;
|
|
|
+ height: 12px;
|
|
|
+ border-radius: 50%;
|
|
|
+ margin-right: 6px;
|
|
|
+ flex-shrink: 0;
|
|
|
+ }}
|
|
|
+ .legend-line {{
|
|
|
+ width: 20px;
|
|
|
+ height: 3px;
|
|
|
+ margin-right: 6px;
|
|
|
+ flex-shrink: 0;
|
|
|
+ }}
|
|
|
+ .detail-panel {{
|
|
|
+ margin-top: 20px;
|
|
|
+ padding: 15px;
|
|
|
+ background: #0f3460;
|
|
|
+ border-radius: 8px;
|
|
|
+ display: none;
|
|
|
+ }}
|
|
|
+ .detail-panel.active {{
|
|
|
+ display: block;
|
|
|
+ }}
|
|
|
+ .detail-panel h3 {{
|
|
|
+ font-size: 14px;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ color: #e94560;
|
|
|
+ }}
|
|
|
+ .detail-panel p {{
|
|
|
+ font-size: 12px;
|
|
|
+ line-height: 1.6;
|
|
|
+ color: #ccc;
|
|
|
+ margin: 5px 0;
|
|
|
+ }}
|
|
|
+ .detail-panel .label {{
|
|
|
+ color: #888;
|
|
|
+ }}
|
|
|
+ .detail-panel .close-btn {{
|
|
|
+ position: absolute;
|
|
|
+ top: 10px;
|
|
|
+ right: 10px;
|
|
|
+ background: none;
|
|
|
+ border: none;
|
|
|
+ color: #888;
|
|
|
+ cursor: pointer;
|
|
|
+ font-size: 16px;
|
|
|
+ }}
|
|
|
+ .detail-panel .close-btn:hover {{
|
|
|
+ color: #e94560;
|
|
|
+ }}
|
|
|
+ .detail-panel-wrapper {{
|
|
|
+ position: relative;
|
|
|
+ }}
|
|
|
+ .similarity-score {{
|
|
|
+ background: #e94560;
|
|
|
+ color: #fff;
|
|
|
+ padding: 2px 6px;
|
|
|
+ border-radius: 4px;
|
|
|
+ font-weight: bold;
|
|
|
+ }}
|
|
|
+ .edge-description {{
|
|
|
+ background: #1a1a2e;
|
|
|
+ padding: 10px;
|
|
|
+ border-radius: 4px;
|
|
|
+ margin-top: 8px;
|
|
|
+ font-size: 11px;
|
|
|
+ line-height: 1.5;
|
|
|
+ }}
|
|
|
+ .edge-list {{
|
|
|
+ background: #1a1a2e;
|
|
|
+ padding: 8px;
|
|
|
+ border-radius: 4px;
|
|
|
+ margin-top: 4px;
|
|
|
+ font-size: 11px;
|
|
|
+ }}
|
|
|
+ .edge-type-item {{
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 2px 0;
|
|
|
+ border-bottom: 1px solid rgba(255,255,255,0.05);
|
|
|
+ }}
|
|
|
+ .edge-type {{
|
|
|
+ color: #aaa;
|
|
|
+ }}
|
|
|
+ .edge-count {{
|
|
|
+ color: #e94560;
|
|
|
+ font-weight: bold;
|
|
|
+ }}
|
|
|
+ .edge-detail {{
|
|
|
+ padding: 3px 0;
|
|
|
+ color: #888;
|
|
|
+ font-size: 10px;
|
|
|
+ border-left: 2px solid #333;
|
|
|
+ padding-left: 8px;
|
|
|
+ margin: 2px 0;
|
|
|
+ }}
|
|
|
+ .edge-type-tag {{
|
|
|
+ background: rgba(255,255,255,0.1);
|
|
|
+ padding: 1px 4px;
|
|
|
+ border-radius: 2px;
|
|
|
+ font-size: 9px;
|
|
|
+ margin-left: 4px;
|
|
|
+ }}
|
|
|
+ .edge-more {{
|
|
|
+ color: #666;
|
|
|
+ font-size: 10px;
|
|
|
+ text-align: center;
|
|
|
+ padding: 4px 0;
|
|
|
+ }}
|
|
|
+ .edge-empty {{
|
|
|
+ color: #555;
|
|
|
+ font-size: 10px;
|
|
|
+ padding: 4px 0;
|
|
|
+ }}
|
|
|
+ svg {{
|
|
|
+ width: 100%;
|
|
|
+ display: block; /* 避免底部多余空间 */
|
|
|
+ }}
|
|
|
+ .node {{
|
|
|
+ cursor: pointer;
|
|
|
+ }}
|
|
|
+ .node circle, .node rect, .node polygon {{
|
|
|
+ stroke-width: 3px;
|
|
|
+ }}
|
|
|
+ .node .post-point-node {{
|
|
|
+ stroke: #fff;
|
|
|
+ stroke-width: 4px;
|
|
|
+ }}
|
|
|
+ .node .post-node,
|
|
|
+ .node .persona-node {{
|
|
|
+ stroke: #fff;
|
|
|
+ }}
|
|
|
+ .node text {{
|
|
|
+ font-size: 11px;
|
|
|
+ fill: #fff;
|
|
|
+ pointer-events: none;
|
|
|
+ }}
|
|
|
+ .link {{
|
|
|
+ stroke-opacity: 0.7;
|
|
|
+ }}
|
|
|
+ .link-hitarea {{
|
|
|
+ stroke: transparent;
|
|
|
+ stroke-width: 15px;
|
|
|
+ cursor: pointer;
|
|
|
+ fill: none;
|
|
|
+ }}
|
|
|
+ .link-hitarea:hover + .link {{
|
|
|
+ stroke-opacity: 1;
|
|
|
+ stroke-width: 3px;
|
|
|
+ }}
|
|
|
+ .edge-label {{
|
|
|
+ font-size: 10px;
|
|
|
+ fill: #fff;
|
|
|
+ pointer-events: none;
|
|
|
+ text-anchor: middle;
|
|
|
+ }}
|
|
|
+ .edge-label-bg {{
|
|
|
+ fill: rgba(0,0,0,0.7);
|
|
|
+ }}
|
|
|
+ .link.match {{
|
|
|
+ stroke: #e94560;
|
|
|
+ stroke-dasharray: 5,5;
|
|
|
+ }}
|
|
|
+ .link.category-cross {{
|
|
|
+ stroke: #2ecc71;
|
|
|
+ }}
|
|
|
+ .link.category-intra {{
|
|
|
+ stroke: #3498db;
|
|
|
+ }}
|
|
|
+ .link.tag-cooccur {{
|
|
|
+ stroke: #f39c12;
|
|
|
+ }}
|
|
|
+ .link.belong {{
|
|
|
+ stroke: #9b59b6;
|
|
|
+ }}
|
|
|
+ .link.contain {{
|
|
|
+ stroke: #8e44ad;
|
|
|
+ stroke-dasharray: 2,2;
|
|
|
+ }}
|
|
|
+ /* 镜像边样式(实线,颜色与原边相同) */
|
|
|
+ .link.mirror-category-cross {{
|
|
|
+ stroke: #2ecc71;
|
|
|
+ }}
|
|
|
+ .link.mirror-category-intra {{
|
|
|
+ stroke: #3498db;
|
|
|
+ }}
|
|
|
+ .link.mirror-tag-cooccur {{
|
|
|
+ stroke: #f39c12;
|
|
|
+ }}
|
|
|
+ .link.mirror-belong {{
|
|
|
+ stroke: #9b59b6;
|
|
|
+ }}
|
|
|
+ .link.mirror-contain {{
|
|
|
+ stroke: #8e44ad;
|
|
|
+ }}
|
|
|
+ /* 二阶边现在使用与镜像边相同的样式(基于原始边类型) */
|
|
|
+ /* 高亮/灰化样式 */
|
|
|
+ .node.dimmed circle, .node.dimmed rect, .node.dimmed polygon {{
|
|
|
+ opacity: 0.15 !important;
|
|
|
+ }}
|
|
|
+ .node.dimmed text {{
|
|
|
+ opacity: 0.15 !important;
|
|
|
+ }}
|
|
|
+ .link-group.dimmed .link {{
|
|
|
+ stroke-opacity: 0.08 !important;
|
|
|
+ }}
|
|
|
+ .link-group.dimmed .edge-label-group {{
|
|
|
+ opacity: 0.15 !important;
|
|
|
+ }}
|
|
|
+ .node.highlighted circle, .node.highlighted rect, .node.highlighted polygon {{
|
|
|
+ stroke: #fff !important;
|
|
|
+ stroke-width: 4px !important;
|
|
|
+ filter: drop-shadow(0 0 8px rgba(255,255,255,0.5));
|
|
|
+ }}
|
|
|
+ .link-group.highlighted .link {{
|
|
|
+ stroke-opacity: 1 !important;
|
|
|
+ stroke-width: 3px !important;
|
|
|
+ filter: drop-shadow(0 0 4px rgba(255,255,255,0.3));
|
|
|
+ }}
|
|
|
+ .tooltip {{
|
|
|
+ position: absolute;
|
|
|
+ background: rgba(0,0,0,0.9);
|
|
|
+ color: #fff;
|
|
|
+ padding: 10px 15px;
|
|
|
+ border-radius: 6px;
|
|
|
+ font-size: 12px;
|
|
|
+ pointer-events: none;
|
|
|
+ max-width: 300px;
|
|
|
+ z-index: 1000;
|
|
|
+ display: none;
|
|
|
+ }}
|
|
|
+ .controls {{
|
|
|
+ background: rgba(15, 52, 96, 0.5);
|
|
|
+ padding: 12px;
|
|
|
+ border-radius: 8px;
|
|
|
+ margin-top: auto;
|
|
|
+ border-top: 1px solid #0f3460;
|
|
|
+ padding-top: 15px;
|
|
|
+ }}
|
|
|
+ .controls button {{
|
|
|
+ background: #0f3460;
|
|
|
+ color: #fff;
|
|
|
+ border: none;
|
|
|
+ padding: 8px 15px;
|
|
|
+ margin: 5px;
|
|
|
+ border-radius: 4px;
|
|
|
+ cursor: pointer;
|
|
|
+ font-size: 12px;
|
|
|
+ }}
|
|
|
+ .controls button:hover {{
|
|
|
+ background: #e94560;
|
|
|
+ }}
|
|
|
+ .controls button.active {{
|
|
|
+ background: #e94560;
|
|
|
+ }}
|
|
|
+ .controls .control-group {{
|
|
|
+ margin-top: 10px;
|
|
|
+ padding-top: 10px;
|
|
|
+ border-top: 1px solid rgba(255,255,255,0.1);
|
|
|
+ }}
|
|
|
+ .controls .control-label {{
|
|
|
+ font-size: 11px;
|
|
|
+ color: #888;
|
|
|
+ margin-bottom: 5px;
|
|
|
+ }}
|
|
|
+ .controls select {{
|
|
|
+ background: #0f3460;
|
|
|
+ color: #fff;
|
|
|
+ border: none;
|
|
|
+ padding: 6px 10px;
|
|
|
+ border-radius: 4px;
|
|
|
+ font-size: 12px;
|
|
|
+ cursor: pointer;
|
|
|
+ }}
|
|
|
+ /* 关系子图节点样式 */
|
|
|
+ .ego-node {{
|
|
|
+ cursor: pointer;
|
|
|
+ }}
|
|
|
+ .ego-node circle {{
|
|
|
+ stroke-width: 2px;
|
|
|
+ }}
|
|
|
+ .ego-node.center circle {{
|
|
|
+ stroke: #fff;
|
|
|
+ stroke-width: 3px;
|
|
|
+ filter: drop-shadow(0 0 8px rgba(255,255,255,0.5));
|
|
|
+ }}
|
|
|
+ .ego-node text {{
|
|
|
+ font-size: 10px;
|
|
|
+ fill: #fff;
|
|
|
+ pointer-events: none;
|
|
|
+ }}
|
|
|
+ .ego-edge {{
|
|
|
+ stroke-opacity: 0.6;
|
|
|
+ stroke-width: 1.5;
|
|
|
+ }}
|
|
|
+ </style>
|
|
|
+</head>
|
|
|
+<body>
|
|
|
+ <div id="container">
|
|
|
+ <div class="tabs" id="tabs">
|
|
|
+ {tabs_html}
|
|
|
+ </div>
|
|
|
+ <div class="main-content">
|
|
|
+ <div id="graph">
|
|
|
+ <div class="tooltip" id="tooltip"></div>
|
|
|
+ </div>
|
|
|
+ <div id="sidebar">
|
|
|
+ <h1>匹配图谱</h1>
|
|
|
+
|
|
|
+ <div class="detail-panel active" id="detailPanel">
|
|
|
+ <h3 id="detailTitle">点击节点或边查看详情</h3>
|
|
|
+ <div id="detailContent">
|
|
|
+ <p style="color: #888; font-size: 11px;">点击图中的节点或边,这里会显示详细信息</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="legend">
|
|
|
+ <h2>节点</h2>
|
|
|
+ <div class="legend-grid">
|
|
|
+ <div class="legend-item">
|
|
|
+ <div class="legend-color" style="background: #f39c12; border: 2px solid #fff;"></div>
|
|
|
+ <span>灵感点</span>
|
|
|
+ </div>
|
|
|
+ <div class="legend-item">
|
|
|
+ <div class="legend-color" style="background: #3498db; border: 2px solid #fff;"></div>
|
|
|
+ <span>目的点</span>
|
|
|
+ </div>
|
|
|
+ <div class="legend-item">
|
|
|
+ <div class="legend-color" style="background: #9b59b6; border: 2px solid #fff;"></div>
|
|
|
+ <span>关键点</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <h2>边</h2>
|
|
|
+ <div class="legend-grid">
|
|
|
+ <div class="legend-item">
|
|
|
+ <div class="legend-line" style="background: #e94560;"></div>
|
|
|
+ <span>匹配</span>
|
|
|
+ </div>
|
|
|
+ <div class="legend-item">
|
|
|
+ <div class="legend-line" style="background: #9b59b6;"></div>
|
|
|
+ <span>属于</span>
|
|
|
+ </div>
|
|
|
+ <div class="legend-item">
|
|
|
+ <div class="legend-line" style="background: #2ecc71;"></div>
|
|
|
+ <span>分类共现(跨)</span>
|
|
|
+ </div>
|
|
|
+ <div class="legend-item">
|
|
|
+ <div class="legend-line" style="background: #3498db;"></div>
|
|
|
+ <span>分类共现(内)</span>
|
|
|
+ </div>
|
|
|
+ <div class="legend-item">
|
|
|
+ <div class="legend-line" style="background: #f39c12;"></div>
|
|
|
+ <span>标签共现</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="controls">
|
|
|
+ <div class="control-label">视图控制</div>
|
|
|
+ <button onclick="resetZoom()">重置视图</button>
|
|
|
+ <button onclick="toggleLabels()">切换标签</button>
|
|
|
+ <button onclick="toggleCrossLayerEdges()" id="crossLayerBtn">显示跨层边</button>
|
|
|
+ <div class="control-group">
|
|
|
+ <div class="control-label">人设树配置</div>
|
|
|
+ <button onclick="toggleTreeTags()" id="treeTagBtn" class="active">显示标签</button>
|
|
|
+ <select id="treeDepthSelect" onchange="setTreeDepth(this.value)">
|
|
|
+ <option value="0">全部层级</option>
|
|
|
+ <option value="2">2层</option>
|
|
|
+ <option value="3">3层</option>
|
|
|
+ <option value="4">4层</option>
|
|
|
+ <option value="5">5层</option>
|
|
|
+ </select>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <script>
|
|
|
+ // 所有帖子的图谱数据
|
|
|
+ const allGraphData = {all_graph_data};
|
|
|
+
|
|
|
+ // 完整的人设树数据(所有人设节点和属于边)
|
|
|
+ const personaTreeData = {persona_tree_data};
|
|
|
+
|
|
|
+ // 当前选中的帖子索引
|
|
|
+ let currentIndex = 0;
|
|
|
+ let simulation = null;
|
|
|
+ let svg = null;
|
|
|
+ let g = null;
|
|
|
+ let zoom = null;
|
|
|
+ let showLabels = true;
|
|
|
+ let showCrossLayerEdges = false; // 跨层边默认隐藏
|
|
|
+ let isCrossLayerEdge = null; // 跨层边判断函数(在renderGraph中设置)
|
|
|
+
|
|
|
+ // 人设树配置
|
|
|
+ let showTreeTags = true; // 是否显示标签节点
|
|
|
+ let treeMaxDepth = 0; // 显示的最大层数(0=全部)
|
|
|
+
|
|
|
+ // 切换标签显示
|
|
|
+ function toggleTreeTags() {{
|
|
|
+ showTreeTags = !showTreeTags;
|
|
|
+ const btn = document.getElementById("treeTagBtn");
|
|
|
+ btn.textContent = showTreeTags ? "显示标签" : "隐藏标签";
|
|
|
+ btn.classList.toggle("active", showTreeTags);
|
|
|
+ // 重新渲染当前图谱
|
|
|
+ renderGraph(allGraphData[currentIndex]);
|
|
|
+ }}
|
|
|
+
|
|
|
+ // 设置树的显示层数
|
|
|
+ function setTreeDepth(depth) {{
|
|
|
+ treeMaxDepth = parseInt(depth);
|
|
|
+ // 重新渲染当前图谱
|
|
|
+ renderGraph(allGraphData[currentIndex]);
|
|
|
+ }}
|
|
|
+
|
|
|
+ // 初始化
|
|
|
+ function init() {{
|
|
|
+ const container = document.getElementById("graph");
|
|
|
+ const width = container.clientWidth;
|
|
|
+ const height = container.clientHeight;
|
|
|
+
|
|
|
+ svg = d3.select("#graph")
|
|
|
+ .append("svg")
|
|
|
+ .attr("width", width)
|
|
|
+ .attr("height", height);
|
|
|
+
|
|
|
+ g = svg.append("g");
|
|
|
+
|
|
|
+ zoom = d3.zoom()
|
|
|
+ .scaleExtent([0.1, 4])
|
|
|
+ .on("zoom", (event) => {{
|
|
|
+ g.attr("transform", event.transform);
|
|
|
+ }});
|
|
|
+
|
|
|
+ svg.call(zoom);
|
|
|
+
|
|
|
+ // 绑定Tab点击事件
|
|
|
+ document.querySelectorAll(".tab").forEach((tab, index) => {{
|
|
|
+ tab.addEventListener("click", () => switchTab(index));
|
|
|
+ }});
|
|
|
+
|
|
|
+ // 显示第一个帖子
|
|
|
+ switchTab(0);
|
|
|
+ }}
|
|
|
+
|
|
|
+ // 构建人设树数据(合并为一棵树,根节点为"人设")
|
|
|
+ // showTreeTags: 控制是否显示标签节点
|
|
|
+ // treeMaxDepth: 控制树的显示深度(0=全部,2=维度,3=+一层,4=+两层...)
|
|
|
+ function buildPersonaTreeData() {{
|
|
|
+ const dimensions = ["灵感点", "目的点", "关键点"];
|
|
|
+ const dimColors = {{ "灵感点": "#f39c12", "目的点": "#3498db", "关键点": "#9b59b6" }};
|
|
|
+ const dimensionChildren = [];
|
|
|
+ let totalNodeCount = 0;
|
|
|
+
|
|
|
+ dimensions.forEach(dim => {{
|
|
|
+ // 根据 showTreeTags 过滤节点(独立于深度控制)
|
|
|
+ let dimNodes = personaTreeData.nodes.filter(n => n.节点层级 === dim);
|
|
|
+ if (!showTreeTags) {{
|
|
|
+ dimNodes = dimNodes.filter(n => n.节点类型 !== "标签");
|
|
|
+ }}
|
|
|
+
|
|
|
+ if (dimNodes.length === 0) {{
|
|
|
+ const dimNode = {{
|
|
|
+ name: dim,
|
|
|
+ 节点名称: dim,
|
|
|
+ isDimension: true,
|
|
|
+ dimColor: dimColors[dim],
|
|
|
+ children: []
|
|
|
+ }};
|
|
|
+ dimensionChildren.push(dimNode);
|
|
|
+ return;
|
|
|
+ }}
|
|
|
+
|
|
|
+ const nodeMap = {{}};
|
|
|
+ dimNodes.forEach(n => nodeMap[n.节点ID] = {{ ...n, name: n.节点名称, children: [], dimColor: dimColors[dim] }});
|
|
|
+
|
|
|
+ // 只用属于边构建父子关系
|
|
|
+ const hierarchyEdgeTypes = ["属于"];
|
|
|
+ const hasParent = new Set();
|
|
|
+ personaTreeData.edges.forEach(e => {{
|
|
|
+ if (!hierarchyEdgeTypes.includes(e.边类型)) return; // 跳过非层级边
|
|
|
+ const srcNode = nodeMap[e.源节点ID];
|
|
|
+ const tgtNode = nodeMap[e.目标节点ID];
|
|
|
+ if (srcNode && tgtNode) {{
|
|
|
+ tgtNode.children.push(srcNode);
|
|
|
+ hasParent.add(e.源节点ID);
|
|
|
+ }}
|
|
|
+ }});
|
|
|
+
|
|
|
+ const roots = dimNodes.filter(n => !hasParent.has(n.节点ID)).map(n => nodeMap[n.节点ID]);
|
|
|
+
|
|
|
+ const dimNode = {{
|
|
|
+ name: dim,
|
|
|
+ 节点名称: dim,
|
|
|
+ isDimension: true,
|
|
|
+ dimColor: dimColors[dim],
|
|
|
+ children: roots
|
|
|
+ }};
|
|
|
+
|
|
|
+ dimensionChildren.push(dimNode);
|
|
|
+ totalNodeCount += dimNodes.length;
|
|
|
+ }});
|
|
|
+
|
|
|
+ // 根节点"人设"
|
|
|
+ const rootNode = {{
|
|
|
+ name: "人设",
|
|
|
+ 节点名称: "人设",
|
|
|
+ isRoot: true,
|
|
|
+ children: dimensionChildren
|
|
|
+ }};
|
|
|
+
|
|
|
+ // 根据 treeMaxDepth 截断树深度(0=全部)
|
|
|
+ // 深度1=根,深度2=维度,深度3+=子节点
|
|
|
+ if (treeMaxDepth > 0) {{
|
|
|
+ truncateTree(rootNode, 1, treeMaxDepth);
|
|
|
+ }}
|
|
|
+
|
|
|
+ return {{ root: rootNode, nodeCount: totalNodeCount }};
|
|
|
+ }}
|
|
|
+
|
|
|
+ // 递归截断树的深度
|
|
|
+ function truncateTree(node, currentDepth, maxDepth) {{
|
|
|
+ if (currentDepth >= maxDepth) {{
|
|
|
+ node.children = [];
|
|
|
+ return;
|
|
|
+ }}
|
|
|
+ if (node.children) {{
|
|
|
+ node.children.forEach(child => truncateTree(child, currentDepth + 1, maxDepth));
|
|
|
+ }}
|
|
|
+ }}
|
|
|
+
|
|
|
+ // 切换Tab
|
|
|
+ function switchTab(index) {{
|
|
|
+ currentIndex = index;
|
|
|
+
|
|
|
+ // 更新Tab样式
|
|
|
+ document.querySelectorAll(".tab").forEach((tab, i) => {{
|
|
|
+ tab.classList.toggle("active", i === index);
|
|
|
+ }});
|
|
|
+
|
|
|
+ // 更新图谱
|
|
|
+ renderGraph(allGraphData[index]);
|
|
|
+ }}
|
|
|
+
|
|
|
+ // 渲染图谱
|
|
|
+ function renderGraph(data) {{
|
|
|
+ // 清空现有图谱
|
|
|
+ g.selectAll("*").remove();
|
|
|
+ if (simulation) {{
|
|
|
+ simulation.stop();
|
|
|
+ }}
|
|
|
+
|
|
|
+ const container = document.getElementById("graph");
|
|
|
+ const width = container.clientWidth;
|
|
|
+
|
|
|
+ // 布局配置:左侧人设树,右侧三层圆形
|
|
|
+ // 树宽度自适应:占总宽度的35%,最小400,最大550
|
|
|
+ const treeAreaWidth = Math.max(400, Math.min(550, width * 0.35));
|
|
|
+ const circleAreaLeft = treeAreaWidth + 40; // 圆形区域起始X
|
|
|
+ const circleAreaWidth = width - circleAreaLeft - 50;
|
|
|
+ const circleAreaCenterX = circleAreaLeft + circleAreaWidth / 2;
|
|
|
+
|
|
|
+ // 准备数据
|
|
|
+ const nodes = data.nodes.map(n => ({{
|
|
|
+ ...n,
|
|
|
+ id: n.节点ID,
|
|
|
+ source: n.节点ID.startsWith("帖子_") ? "帖子" : "人设",
|
|
|
+ level: n.节点层级
|
|
|
+ }}));
|
|
|
+
|
|
|
+ const links = data.edges.map(e => ({{
|
|
|
+ ...e,
|
|
|
+ source: e.源节点ID,
|
|
|
+ target: e.目标节点ID,
|
|
|
+ type: e.边类型
|
|
|
+ }}));
|
|
|
+
|
|
|
+ // 分离节点类型
|
|
|
+ const postNodes = nodes.filter(n => n.source === "帖子");
|
|
|
+ const personaNodes = nodes.filter(n => n.source === "人设" && !n.是否扩展);
|
|
|
+ const expandedNodes = nodes.filter(n => n.source === "人设" && n.是否扩展);
|
|
|
+ const matchLinks = links.filter(l => l.type === "匹配");
|
|
|
+
|
|
|
+ // 构建帖子节点到人设节点的映射
|
|
|
+ const postToPersona = {{}};
|
|
|
+ const personaToPost = {{}};
|
|
|
+ matchLinks.forEach(l => {{
|
|
|
+ const sid = typeof l.source === "object" ? l.source.id : l.source;
|
|
|
+ const tid = typeof l.target === "object" ? l.target.id : l.target;
|
|
|
+ if (!postToPersona[sid]) postToPersona[sid] = [];
|
|
|
+ postToPersona[sid].push(tid);
|
|
|
+ if (!personaToPost[tid]) personaToPost[tid] = [];
|
|
|
+ personaToPost[tid].push(sid);
|
|
|
+ }});
|
|
|
+
|
|
|
+ // 找出所有连通分量
|
|
|
+ function findConnectedComponents(nodes, links) {{
|
|
|
+ const nodeIds = new Set(nodes.map(n => n.id));
|
|
|
+ const adj = {{}};
|
|
|
+ nodeIds.forEach(id => adj[id] = []);
|
|
|
+
|
|
|
+ links.forEach(l => {{
|
|
|
+ const sid = typeof l.source === "object" ? l.source.id : l.source;
|
|
|
+ const tid = typeof l.target === "object" ? l.target.id : l.target;
|
|
|
+ if (nodeIds.has(sid) && nodeIds.has(tid)) {{
|
|
|
+ adj[sid].push(tid);
|
|
|
+ adj[tid].push(sid);
|
|
|
+ }}
|
|
|
+ }});
|
|
|
+
|
|
|
+ const visited = new Set();
|
|
|
+ const components = [];
|
|
|
+
|
|
|
+ nodeIds.forEach(startId => {{
|
|
|
+ if (visited.has(startId)) return;
|
|
|
+
|
|
|
+ const component = [];
|
|
|
+ const queue = [startId];
|
|
|
+
|
|
|
+ while (queue.length > 0) {{
|
|
|
+ const id = queue.shift();
|
|
|
+ if (visited.has(id)) continue;
|
|
|
+ visited.add(id);
|
|
|
+ component.push(id);
|
|
|
+ adj[id].forEach(neighbor => {{
|
|
|
+ if (!visited.has(neighbor)) queue.push(neighbor);
|
|
|
+ }});
|
|
|
+ }}
|
|
|
+
|
|
|
+ components.push(component);
|
|
|
+ }});
|
|
|
+
|
|
|
+ return components;
|
|
|
+ }}
|
|
|
+
|
|
|
+ // 按大小排序连通分量(大的在前)
|
|
|
+ const components = findConnectedComponents(nodes, links)
|
|
|
+ .sort((a, b) => b.length - a.length);
|
|
|
+ console.log(`找到 ${{components.length}} 个连通分量`);
|
|
|
+
|
|
|
+ // 为每个节点分配连通分量ID和分量内的X范围
|
|
|
+ const nodeToComponent = {{}};
|
|
|
+ const componentCenters = {{}};
|
|
|
+ const componentBounds = {{}};
|
|
|
+ const padding = 50; // 分量之间的间距
|
|
|
+ const totalPadding = padding * (components.length - 1);
|
|
|
+ const availableWidth = width - totalPadding - 100; // 留边距
|
|
|
+
|
|
|
+ // 根据分量大小分配宽度
|
|
|
+ const totalNodes = nodes.length;
|
|
|
+ let currentX = 50; // 起始边距
|
|
|
+
|
|
|
+ components.forEach((comp, i) => {{
|
|
|
+ const compWidth = Math.max(150, (comp.length / totalNodes) * availableWidth);
|
|
|
+ const centerX = currentX + compWidth / 2;
|
|
|
+ componentCenters[i] = centerX;
|
|
|
+ componentBounds[i] = {{ start: currentX, end: currentX + compWidth, width: compWidth }};
|
|
|
+ comp.forEach(nodeId => {{
|
|
|
+ nodeToComponent[nodeId] = i;
|
|
|
+ }});
|
|
|
+ currentX += compWidth + padding;
|
|
|
+ }});
|
|
|
+
|
|
|
+ // 使用重心法(Barycenter)减少边交叉
|
|
|
+ // 迭代优化:交替调整两层节点的顺序
|
|
|
+
|
|
|
+ const nodeTargetX = {{}};
|
|
|
+ const personaXMap = {{}};
|
|
|
+
|
|
|
+ // 对每个连通分量单独处理
|
|
|
+ components.forEach((comp, compIdx) => {{
|
|
|
+ const bounds = componentBounds[compIdx];
|
|
|
+ const compPostNodes = postNodes.filter(n => nodeToComponent[n.id] === compIdx);
|
|
|
+ const compPersonaNodes = personaNodes.filter(n => nodeToComponent[n.id] === compIdx);
|
|
|
+
|
|
|
+ if (compPostNodes.length === 0 || compPersonaNodes.length === 0) {{
|
|
|
+ // 没有匹配关系的分量,均匀分布
|
|
|
+ const spacing = bounds.width / (comp.length + 1);
|
|
|
+ comp.forEach((nodeId, i) => {{
|
|
|
+ const node = nodes.find(n => n.id === nodeId);
|
|
|
+ if (node) {{
|
|
|
+ node.x = bounds.start + spacing * (i + 1);
|
|
|
+ nodeTargetX[nodeId] = node.x;
|
|
|
+ if (node.source === "人设") personaXMap[nodeId] = node.x;
|
|
|
+ }}
|
|
|
+ }});
|
|
|
+ return;
|
|
|
+ }}
|
|
|
+
|
|
|
+ // 初始化:给人设节点一个初始顺序
|
|
|
+ let personaOrder = compPersonaNodes.map((n, i) => ({{ node: n, order: i }}));
|
|
|
+
|
|
|
+ // 迭代优化(3轮)
|
|
|
+ for (let iter = 0; iter < 3; iter++) {{
|
|
|
+ // 1. 根据人设节点位置,计算帖子节点的重心
|
|
|
+ const postBarycenter = {{}};
|
|
|
+ compPostNodes.forEach(pn => {{
|
|
|
+ const matched = postToPersona[pn.id] || [];
|
|
|
+ if (matched.length > 0) {{
|
|
|
+ const avgOrder = matched.reduce((sum, pid) => {{
|
|
|
+ const po = personaOrder.find(p => p.node.id === pid);
|
|
|
+ return sum + (po ? po.order : 0);
|
|
|
+ }}, 0) / matched.length;
|
|
|
+ postBarycenter[pn.id] = avgOrder;
|
|
|
+ }} else {{
|
|
|
+ postBarycenter[pn.id] = 0;
|
|
|
+ }}
|
|
|
+ }});
|
|
|
+
|
|
|
+ // 按重心排序帖子节点
|
|
|
+ const sortedPosts = [...compPostNodes].sort((a, b) =>
|
|
|
+ postBarycenter[a.id] - postBarycenter[b.id]
|
|
|
+ );
|
|
|
+
|
|
|
+ // 2. 根据帖子节点位置,重新计算人设节点的重心
|
|
|
+ const personaBarycenter = {{}};
|
|
|
+ compPersonaNodes.forEach(pn => {{
|
|
|
+ const matched = personaToPost[pn.id] || [];
|
|
|
+ if (matched.length > 0) {{
|
|
|
+ const avgOrder = matched.reduce((sum, pid) => {{
|
|
|
+ const idx = sortedPosts.findIndex(p => p.id === pid);
|
|
|
+ return sum + (idx >= 0 ? idx : 0);
|
|
|
+ }}, 0) / matched.length;
|
|
|
+ personaBarycenter[pn.id] = avgOrder;
|
|
|
+ }} else {{
|
|
|
+ personaBarycenter[pn.id] = personaOrder.find(p => p.node.id === pn.id)?.order || 0;
|
|
|
+ }}
|
|
|
+ }});
|
|
|
+
|
|
|
+ // 更新人设节点顺序
|
|
|
+ personaOrder = compPersonaNodes
|
|
|
+ .map(n => ({{ node: n, order: personaBarycenter[n.id] }}))
|
|
|
+ .sort((a, b) => a.order - b.order)
|
|
|
+ .map((item, i) => ({{ node: item.node, order: i }}));
|
|
|
+ }}
|
|
|
+
|
|
|
+ // 最终排序
|
|
|
+ const finalPersonaOrder = personaOrder.map(p => p.node);
|
|
|
+ const postBarycenter = {{}};
|
|
|
+ compPostNodes.forEach(pn => {{
|
|
|
+ const matched = postToPersona[pn.id] || [];
|
|
|
+ if (matched.length > 0) {{
|
|
|
+ const avgOrder = matched.reduce((sum, pid) => {{
|
|
|
+ const idx = finalPersonaOrder.findIndex(n => n.id === pid);
|
|
|
+ return sum + (idx >= 0 ? idx : 0);
|
|
|
+ }}, 0) / matched.length;
|
|
|
+ postBarycenter[pn.id] = avgOrder;
|
|
|
+ }} else {{
|
|
|
+ postBarycenter[pn.id] = 0;
|
|
|
+ }}
|
|
|
+ }});
|
|
|
+ const finalPostOrder = [...compPostNodes].sort((a, b) =>
|
|
|
+ postBarycenter[a.id] - postBarycenter[b.id]
|
|
|
+ );
|
|
|
+
|
|
|
+ // 设置位置
|
|
|
+ const personaSpacing = bounds.width / (finalPersonaOrder.length + 1);
|
|
|
+ finalPersonaOrder.forEach((n, i) => {{
|
|
|
+ n.x = bounds.start + personaSpacing * (i + 1);
|
|
|
+ nodeTargetX[n.id] = n.x;
|
|
|
+ personaXMap[n.id] = n.x;
|
|
|
+ }});
|
|
|
+
|
|
|
+ const postSpacing = bounds.width / (finalPostOrder.length + 1);
|
|
|
+ finalPostOrder.forEach((n, i) => {{
|
|
|
+ // 帖子节点用重心位置(匹配人设的平均X)
|
|
|
+ const matched = postToPersona[n.id] || [];
|
|
|
+ if (matched.length > 0) {{
|
|
|
+ const avgX = matched.reduce((sum, pid) => sum + (personaXMap[pid] || bounds.start + bounds.width/2), 0) / matched.length;
|
|
|
+ n.x = avgX;
|
|
|
+ }} else {{
|
|
|
+ n.x = bounds.start + postSpacing * (i + 1);
|
|
|
+ }}
|
|
|
+ nodeTargetX[n.id] = n.x;
|
|
|
+ }});
|
|
|
+ }});
|
|
|
+
|
|
|
+ // 节点颜色
|
|
|
+ const levelColors = {{
|
|
|
+ "灵感点": "#f39c12",
|
|
|
+ "目的点": "#3498db",
|
|
|
+ "关键点": "#9b59b6"
|
|
|
+ }};
|
|
|
+
|
|
|
+ // 获取节点的层级编号(三层结构)
|
|
|
+ function getNodeLayer(d) {{
|
|
|
+ if (d.source === "帖子") {{
|
|
|
+ return d.节点类型 === "点" ? 0 : 1; // 点=0, 标签=1
|
|
|
+ }}
|
|
|
+ return 2; // 人设(标签+分类)都在层2
|
|
|
+ }}
|
|
|
+
|
|
|
+ // 统计每层节点数量(三层结构)
|
|
|
+ const layerCounts = {{0: 0, 1: 0, 2: 0}};
|
|
|
+ nodes.forEach(n => {{
|
|
|
+ const layer = getNodeLayer(n);
|
|
|
+ layerCounts[layer]++;
|
|
|
+ }});
|
|
|
+ console.log("每层节点数:", layerCounts);
|
|
|
+
|
|
|
+ // 根据节点数量计算每层圆的半径
|
|
|
+ const minRadius = 80;
|
|
|
+ const maxRadius = Math.min(circleAreaWidth / 2 - 30, 350);
|
|
|
+ const nodeSpacing = 70;
|
|
|
+
|
|
|
+ function calcRadius(nodeCount) {{
|
|
|
+ if (nodeCount <= 1) return minRadius;
|
|
|
+ const circumference = nodeCount * nodeSpacing;
|
|
|
+ const r = circumference / (2 * Math.PI);
|
|
|
+ return Math.max(minRadius, Math.min(maxRadius, r));
|
|
|
+ }}
|
|
|
+
|
|
|
+ const layerRadius = {{
|
|
|
+ 0: calcRadius(layerCounts[0]),
|
|
|
+ 1: calcRadius(layerCounts[1]),
|
|
|
+ 2: calcRadius(layerCounts[2]),
|
|
|
+ 3: 250 // 关系图层默认半径(更大,容纳更多节点)
|
|
|
+ }};
|
|
|
+ console.log("每层半径:", layerRadius);
|
|
|
+
|
|
|
+ // 计算四层的高度和圆心Y坐标
|
|
|
+ const layerPadding = 50;
|
|
|
+ const layerHeights = {{
|
|
|
+ 0: layerRadius[0] * 2 + layerPadding,
|
|
|
+ 1: layerRadius[1] * 2 + layerPadding,
|
|
|
+ 2: layerRadius[2] * 2 + layerPadding,
|
|
|
+ 3: layerRadius[3] * 2 + layerPadding
|
|
|
+ }};
|
|
|
+
|
|
|
+ // 获取人设树数据(单棵树)
|
|
|
+ const personaTree = buildPersonaTreeData();
|
|
|
+ // 树高度自适应:根据节点数量,每个节点约12px,最小800
|
|
|
+ const treeHeight = Math.max(800, personaTree.nodeCount * 12 + 150);
|
|
|
+
|
|
|
+ // 计算总高度(取圆形和树的最大值)
|
|
|
+ const circleHeight = layerHeights[0] + layerHeights[1] + layerHeights[2] + layerHeights[3];
|
|
|
+ const height = Math.max(circleHeight + 100, treeHeight + 80, container.clientHeight);
|
|
|
+
|
|
|
+ // 计算每层圆心坐标(在右侧区域)
|
|
|
+ const layerCenterX = {{}};
|
|
|
+ const layerCenterY = {{}};
|
|
|
+
|
|
|
+ let currentY = layerRadius[0] + layerPadding / 2 + 30;
|
|
|
+ layerCenterY[0] = currentY;
|
|
|
+ layerCenterX[0] = circleAreaCenterX;
|
|
|
+ currentY += layerRadius[0] + layerPadding + layerRadius[1];
|
|
|
+ layerCenterY[1] = currentY;
|
|
|
+ layerCenterX[1] = circleAreaCenterX;
|
|
|
+ currentY += layerRadius[1] + layerPadding + layerRadius[2];
|
|
|
+ layerCenterY[2] = currentY;
|
|
|
+ layerCenterX[2] = circleAreaCenterX;
|
|
|
+ currentY += layerRadius[2] + layerPadding + layerRadius[3];
|
|
|
+ layerCenterY[3] = currentY;
|
|
|
+ layerCenterX[3] = circleAreaCenterX;
|
|
|
+
|
|
|
+ console.log("每层圆心X:", layerCenterX);
|
|
|
+ console.log("每层圆心Y:", layerCenterY);
|
|
|
+
|
|
|
+ // 更新SVG高度
|
|
|
+ svg.attr("height", height);
|
|
|
+
|
|
|
+ // 获取节点的基准Y(层圆心)
|
|
|
+ function getNodeBaseY(d) {{
|
|
|
+ const layer = getNodeLayer(d);
|
|
|
+ return layerCenterY[layer];
|
|
|
+ }}
|
|
|
+
|
|
|
+ // 获取节点的基准X(层圆心)
|
|
|
+ function getNodeBaseX(d) {{
|
|
|
+ const layer = getNodeLayer(d);
|
|
|
+ return layerCenterX[layer];
|
|
|
+ }}
|
|
|
+
|
|
|
+ // 层边界配置(不再使用)
|
|
|
+ const layerBounds = {{}};
|
|
|
+
|
|
|
+ // 自定义层内排斥力(只对同层节点生效,尽量分散)
|
|
|
+ function forceIntraLayerRepulsion(strength) {{
|
|
|
+ let nodes;
|
|
|
+
|
|
|
+ function force(alpha) {{
|
|
|
+ for (let i = 0; i < nodes.length; i++) {{
|
|
|
+ const nodeA = nodes[i];
|
|
|
+ const layerA = getNodeLayer(nodeA);
|
|
|
+
|
|
|
+ for (let j = i + 1; j < nodes.length; j++) {{
|
|
|
+ const nodeB = nodes[j];
|
|
|
+ const layerB = getNodeLayer(nodeB);
|
|
|
+
|
|
|
+ // 只对同层节点施加排斥力
|
|
|
+ if (layerA !== layerB) continue;
|
|
|
+
|
|
|
+ const dx = nodeB.x - nodeA.x;
|
|
|
+ const dy = nodeB.y - nodeA.y;
|
|
|
+ const dist = Math.sqrt(dx * dx + dy * dy) || 1;
|
|
|
+ const minDist = 150; // 增大最小距离,让节点更分散
|
|
|
+
|
|
|
+ if (dist < minDist) {{
|
|
|
+ // 排斥力随距离衰减,但基础强度更大
|
|
|
+ const pushStrength = strength * alpha * (minDist - dist) / dist * 2;
|
|
|
+ const px = dx * pushStrength;
|
|
|
+ const py = dy * pushStrength;
|
|
|
+
|
|
|
+ nodeA.vx -= px;
|
|
|
+ nodeA.vy -= py;
|
|
|
+ nodeB.vx += px;
|
|
|
+ nodeB.vy += py;
|
|
|
+ }}
|
|
|
+ }}
|
|
|
+ }}
|
|
|
+ }}
|
|
|
+
|
|
|
+ force.initialize = function(_) {{
|
|
|
+ nodes = _;
|
|
|
+ }};
|
|
|
+
|
|
|
+ return force;
|
|
|
+ }}
|
|
|
+
|
|
|
+ // 层圆的半径(使用动态计算的 layerRadius)
|
|
|
+ // layerRadius 和 layerCenterY 已在前面定义
|
|
|
+
|
|
|
+ // 层边界约束力(把节点限制在层内)
|
|
|
+ function forceLayerBoundary() {{
|
|
|
+ let nodes;
|
|
|
+
|
|
|
+ function force(alpha) {{
|
|
|
+ nodes.forEach(node => {{
|
|
|
+ const layer = getNodeLayer(node);
|
|
|
+ const centerX = layerCenterX[layer];
|
|
|
+ const centerY = layerCenterY[layer];
|
|
|
+
|
|
|
+ // 使用圆形边界
|
|
|
+ const maxRadius = layerRadius[layer] - 15;
|
|
|
+
|
|
|
+ // 计算到圆心的距离
|
|
|
+ const dx = node.x - centerX;
|
|
|
+ const dy = node.y - centerY;
|
|
|
+ const dist = Math.sqrt(dx * dx + dy * dy);
|
|
|
+
|
|
|
+ // 如果超出圆形边界,拉回来
|
|
|
+ if (dist > maxRadius) {{
|
|
|
+ const scale = maxRadius / dist;
|
|
|
+ node.x = centerX + dx * scale;
|
|
|
+ node.y = centerY + dy * scale;
|
|
|
+
|
|
|
+ // 阻止继续向外运动
|
|
|
+ const angle = Math.atan2(dy, dx);
|
|
|
+ const vOutward = node.vx * Math.cos(angle) + node.vy * Math.sin(angle);
|
|
|
+ if (vOutward > 0) {{
|
|
|
+ node.vx -= vOutward * Math.cos(angle);
|
|
|
+ node.vy -= vOutward * Math.sin(angle);
|
|
|
+ }}
|
|
|
+ }}
|
|
|
+ }});
|
|
|
+ }}
|
|
|
+
|
|
|
+ force.initialize = function(_) {{
|
|
|
+ nodes = _;
|
|
|
+ }};
|
|
|
+
|
|
|
+ return force;
|
|
|
+ }}
|
|
|
+
|
|
|
+ // 层内圆形布局力(让同层节点围绕圆心分布)
|
|
|
+ function forceCircularLayout(strength) {{
|
|
|
+ let nodes;
|
|
|
+
|
|
|
+ function force(alpha) {{
|
|
|
+ // 按层分组(三层)
|
|
|
+ const layerNodes = {{0: [], 1: [], 2: []}};
|
|
|
+ nodes.forEach(node => {{
|
|
|
+ const layer = getNodeLayer(node);
|
|
|
+ layerNodes[layer].push(node);
|
|
|
+ }});
|
|
|
+
|
|
|
+ // 对每层计算布局
|
|
|
+ Object.entries(layerNodes).forEach(([layerIdx, layerGroup]) => {{
|
|
|
+ if (layerGroup.length === 0) return;
|
|
|
+
|
|
|
+ const layer = parseInt(layerIdx);
|
|
|
+ const centerX = layerCenterX[layer];
|
|
|
+ const centerY = layerCenterY[layer];
|
|
|
+
|
|
|
+ // 使用圆形布局
|
|
|
+ const nodeRadius = layerRadius[layer] - 20;
|
|
|
+
|
|
|
+ if (layerGroup.length === 1) {{
|
|
|
+ // 单个节点放在圆心
|
|
|
+ const node = layerGroup[0];
|
|
|
+ node.vx += (centerX - node.x) * strength * alpha;
|
|
|
+ node.vy += (centerY - node.y) * strength * alpha;
|
|
|
+ return;
|
|
|
+ }}
|
|
|
+
|
|
|
+ // 按角度排序节点(保持相对位置稳定)
|
|
|
+ layerGroup.forEach(node => {{
|
|
|
+ node._angle = Math.atan2(node.y - centerY, node.x - centerX);
|
|
|
+ }});
|
|
|
+ layerGroup.sort((a, b) => a._angle - b._angle);
|
|
|
+
|
|
|
+ // 均匀分布在圆周上
|
|
|
+ const angleStep = (2 * Math.PI) / layerGroup.length;
|
|
|
+ layerGroup.forEach((node, i) => {{
|
|
|
+ const angle = -Math.PI / 2 + i * angleStep; // 从顶部开始
|
|
|
+ const idealX = centerX + nodeRadius * Math.cos(angle);
|
|
|
+ const idealY = centerY + nodeRadius * Math.sin(angle);
|
|
|
+
|
|
|
+ node.vx += (idealX - node.x) * strength * alpha;
|
|
|
+ node.vy += (idealY - node.y) * strength * alpha;
|
|
|
+ }});
|
|
|
+ }});
|
|
|
+ }}
|
|
|
+
|
|
|
+ force.initialize = function(_) {{
|
|
|
+ nodes = _;
|
|
|
+ }};
|
|
|
+
|
|
|
+ return force;
|
|
|
+ }}
|
|
|
+
|
|
|
+ // 力导向模拟
|
|
|
+ simulation = d3.forceSimulation(nodes)
|
|
|
+ // 连线力(跨层连接)
|
|
|
+ .force("link", d3.forceLink(links).id(d => d.id)
|
|
|
+ .distance(d => {{
|
|
|
+ // 跨层连线距离
|
|
|
+ if (d.type === "匹配" || d.type === "属于") {{
|
|
|
+ return 150; // 跨层边
|
|
|
+ }}
|
|
|
+ return 60; // 同层边
|
|
|
+ }})
|
|
|
+ .strength(d => {{
|
|
|
+ // 跨层边力度弱一些,不要拉扯节点出层
|
|
|
+ if (d.type === "匹配" || d.type === "属于") {{
|
|
|
+ return 0.03;
|
|
|
+ }}
|
|
|
+ return 0.1;
|
|
|
+ }}))
|
|
|
+ // X方向:轻微拉向各层中心
|
|
|
+ .force("x", d3.forceX(d => getNodeBaseX(d)).strength(0.02))
|
|
|
+ // Y方向:轻微拉向层中心
|
|
|
+ .force("y", d3.forceY(d => getNodeBaseY(d)).strength(0.02))
|
|
|
+ // 层内碰撞检测
|
|
|
+ .force("collision", d3.forceCollide().radius(30))
|
|
|
+ // 层内排斥力(同层节点相互排斥)
|
|
|
+ .force("intraLayer", forceIntraLayerRepulsion(0.8))
|
|
|
+ // 层内布局(圆形或树状)
|
|
|
+ .force("circularLayout", forceCircularLayout(0.15))
|
|
|
+ // 层边界约束(节点不能跑出层,硬约束)
|
|
|
+ .force("boundary", forceLayerBoundary());
|
|
|
+
|
|
|
+ // 边类型到CSS类的映射
|
|
|
+ const edgeTypeClass = {{
|
|
|
+ "匹配": "match",
|
|
|
+ "分类共现(跨点)": "category-cross",
|
|
|
+ "分类共现(点内)": "category-intra",
|
|
|
+ "标签共现": "tag-cooccur",
|
|
|
+ "属于": "belong",
|
|
|
+ "包含": "contain",
|
|
|
+ // 镜像边(帖子节点之间,虚线)
|
|
|
+ "镜像_分类共现(跨点)": "mirror-category-cross",
|
|
|
+ "镜像_分类共现(点内)": "mirror-category-intra",
|
|
|
+ "镜像_标签共现": "mirror-tag-cooccur",
|
|
|
+ "镜像_属于": "mirror-belong",
|
|
|
+ "镜像_包含": "mirror-contain"
|
|
|
+ }};
|
|
|
+
|
|
|
+ // 获取边的CSS类(处理二阶边,映射到对应的镜像边样式)
|
|
|
+ function getEdgeClass(edgeType) {{
|
|
|
+ if (edgeTypeClass[edgeType]) return edgeTypeClass[edgeType];
|
|
|
+ // 二阶边映射到对应的镜像边样式(颜色相同,都用虚线)
|
|
|
+ if (edgeType.startsWith("二阶_")) {{
|
|
|
+ const originalType = edgeType.replace("二阶_", "");
|
|
|
+ const mirrorType = "镜像_" + originalType;
|
|
|
+ if (edgeTypeClass[mirrorType]) return edgeTypeClass[mirrorType];
|
|
|
+ }}
|
|
|
+ return "match";
|
|
|
+ }}
|
|
|
+
|
|
|
+ // 绘制层背景(圆形,使用动态大小)
|
|
|
+ const layerBg = g.append("g").attr("class", "layer-backgrounds");
|
|
|
+
|
|
|
+ // 层配置:名称、颜色(四层圆)
|
|
|
+ const layerConfig = [
|
|
|
+ {{ name: "帖子点", layer: 0, color: "rgba(243, 156, 18, 0.08)", stroke: "rgba(243, 156, 18, 0.3)" }},
|
|
|
+ {{ name: "帖子标签", layer: 1, color: "rgba(52, 152, 219, 0.08)", stroke: "rgba(52, 152, 219, 0.3)" }},
|
|
|
+ {{ name: "人设", layer: 2, color: "rgba(155, 89, 182, 0.08)", stroke: "rgba(155, 89, 182, 0.3)" }},
|
|
|
+ {{ name: "关系图", layer: 3, color: "rgba(233, 69, 96, 0.08)", stroke: "rgba(233, 69, 96, 0.3)" }}
|
|
|
+ ];
|
|
|
+
|
|
|
+ // 绘制四层圆形背景
|
|
|
+ layerConfig.forEach(cfg => {{
|
|
|
+ const cx = layerCenterX[cfg.layer];
|
|
|
+ const cy = layerCenterY[cfg.layer];
|
|
|
+ const r = layerRadius[cfg.layer];
|
|
|
+
|
|
|
+ layerBg.append("circle")
|
|
|
+ .attr("cx", cx)
|
|
|
+ .attr("cy", cy)
|
|
|
+ .attr("r", r)
|
|
|
+ .attr("fill", cfg.color)
|
|
|
+ .attr("stroke", cfg.stroke)
|
|
|
+ .attr("stroke-width", 2);
|
|
|
+
|
|
|
+ // 层标签(圆的左侧)
|
|
|
+ layerBg.append("text")
|
|
|
+ .attr("x", cx - r - 15)
|
|
|
+ .attr("y", cy)
|
|
|
+ .attr("dy", "0.35em")
|
|
|
+ .attr("fill", "rgba(255,255,255,0.5)")
|
|
|
+ .attr("font-size", "13px")
|
|
|
+ .attr("font-weight", "bold")
|
|
|
+ .attr("text-anchor", "end")
|
|
|
+ .text(cfg.name);
|
|
|
+
|
|
|
+ // 关系图层添加占位提示
|
|
|
+ if (cfg.layer === 3) {{
|
|
|
+ layerBg.append("text")
|
|
|
+ .attr("class", "ego-placeholder")
|
|
|
+ .attr("x", cx)
|
|
|
+ .attr("y", cy)
|
|
|
+ .attr("dy", "0.35em")
|
|
|
+ .attr("fill", "rgba(255,255,255,0.3)")
|
|
|
+ .attr("font-size", "12px")
|
|
|
+ .attr("text-anchor", "middle")
|
|
|
+ .text("点击左侧人设树节点查看关系");
|
|
|
+ }}
|
|
|
+ }});
|
|
|
+
|
|
|
+ // 创建关系图层内容组(动态填充)
|
|
|
+ const egoGraphGroup = g.append("g")
|
|
|
+ .attr("class", "ego-graph-content")
|
|
|
+ .attr("transform", `translate(${{layerCenterX[3]}}, ${{layerCenterY[3]}})`);
|
|
|
+
|
|
|
+ // 绘制左侧人设树(单棵树,根节点为"人设")
|
|
|
+ const dimColors = {{ "灵感点": "#f39c12", "目的点": "#3498db", "关键点": "#9b59b6" }};
|
|
|
+
|
|
|
+ const treeGroup = g.append("g")
|
|
|
+ .attr("class", "persona-tree")
|
|
|
+ .attr("transform", `translate(15, 25)`);
|
|
|
+
|
|
|
+ // 绘制背景矩形
|
|
|
+ treeGroup.append("rect")
|
|
|
+ .attr("x", -5)
|
|
|
+ .attr("y", -10)
|
|
|
+ .attr("width", treeAreaWidth - 20)
|
|
|
+ .attr("height", treeHeight - 20)
|
|
|
+ .attr("rx", 8)
|
|
|
+ .attr("fill", "rgba(100, 100, 100, 0.08)")
|
|
|
+ .attr("stroke", "rgba(150, 150, 150, 0.2)")
|
|
|
+ .attr("stroke-width", 1);
|
|
|
+
|
|
|
+ // D3树布局 - 宽度留出边距给标签
|
|
|
+ const treeLayout = d3.tree()
|
|
|
+ .size([treeHeight - 50, treeAreaWidth - 70]);
|
|
|
+
|
|
|
+ const root = d3.hierarchy(personaTree.root);
|
|
|
+ treeLayout(root);
|
|
|
+
|
|
|
+ // 获取节点颜色(根据维度)
|
|
|
+ function getNodeColor(d) {{
|
|
|
+ if (d.data.isRoot) return "#e94560"; // 根节点红色
|
|
|
+ if (d.data.isDimension) return d.data.dimColor; // 维度节点用维度颜色
|
|
|
+ return d.data.dimColor || "#888"; // 分类节点继承维度颜色
|
|
|
+ }}
|
|
|
+
|
|
|
+ // 构建节点ID到D3节点的映射(用于绘制原始边和高亮)
|
|
|
+ const treeNodeById = {{}};
|
|
|
+ root.descendants().forEach(d => {{
|
|
|
+ if (d.data.节点ID) {{
|
|
|
+ treeNodeById[d.data.节点ID] = d;
|
|
|
+ }}
|
|
|
+ }});
|
|
|
+
|
|
|
+ // 边类型颜色和样式
|
|
|
+ const treeEdgeColors = {{
|
|
|
+ "分类层级": "#2ecc71", // 绿色 - 分类的层级关系
|
|
|
+ "属于": "#9b59b6", // 紫色 - 标签属于分类
|
|
|
+ "包含": "#8e44ad", // 深紫 - 分类包含标签
|
|
|
+ "分类共现(跨点)": "#2ecc71", // 绿色 - 跨帖子分类共现
|
|
|
+ "分类共现(点内)": "#3498db", // 蓝色 - 同帖子分类共现
|
|
|
+ "标签共现": "#f39c12" // 橙色 - 标签共现
|
|
|
+ }};
|
|
|
+ const treeEdgeDash = {{
|
|
|
+ "分类层级": "none",
|
|
|
+ "属于": "3,2",
|
|
|
+ "包含": "3,2",
|
|
|
+ "分类共现(跨点)": "5,3",
|
|
|
+ "分类共现(点内)": "5,3",
|
|
|
+ "标签共现": "2,2"
|
|
|
+ }};
|
|
|
+
|
|
|
+ // 只保留"属于"边用于树的展示(其他边用专门子图展示)
|
|
|
+ const visibleTreeEdges = personaTreeData.edges.filter(e => {{
|
|
|
+ return e.边类型 === "属于" && treeNodeById[e.源节点ID] && treeNodeById[e.目标节点ID];
|
|
|
+ }});
|
|
|
+
|
|
|
+ // 添加树结构边(根节点->维度,维度->子节点)
|
|
|
+ root.links().forEach(link => {{
|
|
|
+ visibleTreeEdges.push({{
|
|
|
+ 源节点ID: link.source.data.节点ID || link.source.data.name,
|
|
|
+ 目标节点ID: link.target.data.节点ID || link.target.data.name,
|
|
|
+ 边类型: "属于",
|
|
|
+ isTreeLink: true,
|
|
|
+ sourceNode: link.source,
|
|
|
+ targetNode: link.target
|
|
|
+ }});
|
|
|
+ }});
|
|
|
+
|
|
|
+ // 绘制原始边(分类层级、标签属于)
|
|
|
+ const treeEdgeGroup = treeGroup.append("g").attr("class", "tree-edges");
|
|
|
+
|
|
|
+ // 先绘制可见边
|
|
|
+ const treeEdges = treeEdgeGroup.selectAll(".tree-edge")
|
|
|
+ .data(visibleTreeEdges)
|
|
|
+ .join("path")
|
|
|
+ .attr("class", "tree-edge")
|
|
|
+ .attr("fill", "none")
|
|
|
+ .attr("stroke", "#9b59b6") // 属于边用紫色
|
|
|
+ .attr("stroke-opacity", 0.3)
|
|
|
+ .attr("stroke-width", 1)
|
|
|
+ .attr("d", d => {{
|
|
|
+ const source = d.isTreeLink ? d.sourceNode : treeNodeById[d.源节点ID];
|
|
|
+ const target = d.isTreeLink ? d.targetNode : treeNodeById[d.目标节点ID];
|
|
|
+ if (!source || !target) return "";
|
|
|
+ const midX = (source.y + target.y) / 2;
|
|
|
+ return `M${{source.y}},${{source.x}} C${{midX}},${{source.x}} ${{midX}},${{target.x}} ${{target.y}},${{target.x}}`;
|
|
|
+ }});
|
|
|
+
|
|
|
+ // 绘制透明的热区边(便于点击)
|
|
|
+ const treeEdgeHitareas = treeEdgeGroup.selectAll(".tree-edge-hitarea")
|
|
|
+ .data(visibleTreeEdges)
|
|
|
+ .join("path")
|
|
|
+ .attr("class", "tree-edge-hitarea")
|
|
|
+ .attr("fill", "none")
|
|
|
+ .attr("stroke", "transparent")
|
|
|
+ .attr("stroke-width", 12)
|
|
|
+ .style("cursor", "pointer")
|
|
|
+ .attr("d", d => {{
|
|
|
+ const source = d.isTreeLink ? d.sourceNode : treeNodeById[d.源节点ID];
|
|
|
+ const target = d.isTreeLink ? d.targetNode : treeNodeById[d.目标节点ID];
|
|
|
+ if (!source || !target) return "";
|
|
|
+ const midX = (source.y + target.y) / 2;
|
|
|
+ return `M${{source.y}},${{source.x}} C${{midX}},${{source.x}} ${{midX}},${{target.x}} ${{target.y}},${{target.x}}`;
|
|
|
+ }})
|
|
|
+ .on("click", (event, d) => {{
|
|
|
+ event.stopPropagation();
|
|
|
+ // 调用共享的边点击处理函数
|
|
|
+ handleEdgeClick(d.源节点ID, d.目标节点ID, d.边类型);
|
|
|
+ }});
|
|
|
+
|
|
|
+ // 绘制节点
|
|
|
+ const treeNodes = treeGroup.selectAll(".tree-node")
|
|
|
+ .data(root.descendants())
|
|
|
+ .join("g")
|
|
|
+ .attr("class", "tree-node")
|
|
|
+ .attr("transform", d => `translate(${{d.y}},${{d.x}})`)
|
|
|
+ .style("cursor", "pointer")
|
|
|
+ .on("click", (event, d) => {{
|
|
|
+ event.stopPropagation();
|
|
|
+ // 调用共享的节点点击处理函数
|
|
|
+ handleNodeClick(d.data.节点ID, d.data.节点名称 || d.data.name);
|
|
|
+ }});
|
|
|
+
|
|
|
+ // 节点形状:根节点/维度=圆形,分类=正方形,标签=圆形
|
|
|
+ // 统一实心填充维度颜色
|
|
|
+ treeNodes.each(function(d) {{
|
|
|
+ const el = d3.select(this);
|
|
|
+ const nodeType = d.data.节点类型;
|
|
|
+ const isRoot = d.data.isRoot;
|
|
|
+ const isDimension = d.data.isDimension;
|
|
|
+ const nodeColor = getNodeColor(d);
|
|
|
+
|
|
|
+ if (nodeType === "分类") {{
|
|
|
+ // 分类节点:正方形,实心填充
|
|
|
+ el.append("rect")
|
|
|
+ .attr("class", "tree-shape")
|
|
|
+ .attr("x", -4)
|
|
|
+ .attr("y", -4)
|
|
|
+ .attr("width", 8)
|
|
|
+ .attr("height", 8)
|
|
|
+ .attr("rx", 1)
|
|
|
+ .attr("fill", nodeColor)
|
|
|
+ .attr("stroke", "rgba(255,255,255,0.5)")
|
|
|
+ .attr("stroke-width", 1);
|
|
|
+ }} else {{
|
|
|
+ // 根节点、维度节点、标签节点:圆形,实心填充
|
|
|
+ const radius = isRoot ? 6 : (isDimension ? 5 : 3);
|
|
|
+ el.append("circle")
|
|
|
+ .attr("class", "tree-shape")
|
|
|
+ .attr("r", radius)
|
|
|
+ .attr("fill", nodeColor)
|
|
|
+ .attr("stroke", "rgba(255,255,255,0.5)")
|
|
|
+ .attr("stroke-width", 1);
|
|
|
+ }}
|
|
|
+ }});
|
|
|
+
|
|
|
+ // 节点标签
|
|
|
+ treeNodes.append("text")
|
|
|
+ .attr("dy", "0.31em")
|
|
|
+ .attr("x", d => d.children ? -8 : 8)
|
|
|
+ .attr("text-anchor", d => d.children ? "end" : "start")
|
|
|
+ .attr("fill", d => (d.data.isRoot || d.data.isDimension) ? getNodeColor(d) : "#bbb")
|
|
|
+ .attr("font-size", d => d.data.isRoot ? "11px" : (d.data.isDimension ? "10px" : "8px"))
|
|
|
+ .attr("font-weight", d => (d.data.isRoot || d.data.isDimension) ? "bold" : "normal")
|
|
|
+ .text(d => d.data.name);
|
|
|
+
|
|
|
+ // 重置树高亮状态的函数
|
|
|
+ function resetTreeHighlight() {{
|
|
|
+ treeGroup.selectAll(".tree-node")
|
|
|
+ .classed("tree-dimmed", false)
|
|
|
+ .classed("tree-highlighted", false);
|
|
|
+
|
|
|
+ // 重置所有形状(圆形和方形)- 统一实心填充
|
|
|
+ treeGroup.selectAll(".tree-node .tree-shape")
|
|
|
+ .attr("fill", d => getNodeColor(d))
|
|
|
+ .attr("stroke", "rgba(255,255,255,0.5)")
|
|
|
+ .attr("stroke-opacity", 1)
|
|
|
+ .attr("opacity", 1);
|
|
|
+
|
|
|
+ treeGroup.selectAll(".tree-node text")
|
|
|
+ .attr("fill", d => (d.data.isRoot || d.data.isDimension) ? getNodeColor(d) : "#bbb")
|
|
|
+ .attr("opacity", 1);
|
|
|
+
|
|
|
+ // 重置边样式
|
|
|
+ treeGroup.selectAll(".tree-edge")
|
|
|
+ .attr("stroke-opacity", 0.3)
|
|
|
+ .attr("stroke-width", 1);
|
|
|
+ }}
|
|
|
+
|
|
|
+ // 重置右侧图高亮状态的函数
|
|
|
+ function resetGraphHighlight() {{
|
|
|
+ g.selectAll(".node").classed("dimmed", false).classed("highlighted", false);
|
|
|
+ g.selectAll(".link-group").classed("dimmed", false).classed("highlighted", false);
|
|
|
+ }}
|
|
|
+
|
|
|
+ // 点击树背景也取消高亮
|
|
|
+ treeGroup.select("rect").on("click", function(event) {{
|
|
|
+ event.stopPropagation();
|
|
|
+ resetTreeHighlight();
|
|
|
+ resetGraphHighlight();
|
|
|
+ clearEgoGraph();
|
|
|
+ closeDetailPanel();
|
|
|
+ }});
|
|
|
+
|
|
|
+ // 创建边的容器
|
|
|
+ const linkGroup = g.append("g").attr("class", "links");
|
|
|
+
|
|
|
+ // 为每条边创建组
|
|
|
+ const linkG = linkGroup.selectAll("g")
|
|
|
+ .data(links)
|
|
|
+ .join("g")
|
|
|
+ .attr("class", "link-group");
|
|
|
+
|
|
|
+ // 绘制点击热区(透明宽线)
|
|
|
+ const linkHitarea = linkG.append("line")
|
|
|
+ .attr("class", "link-hitarea");
|
|
|
+
|
|
|
+ // 绘制可见的边
|
|
|
+ const link = linkG.append("line")
|
|
|
+ .attr("class", d => "link " + getEdgeClass(d.type))
|
|
|
+ .attr("stroke-width", d => d.type === "匹配" ? 2.5 : 1.5);
|
|
|
+
|
|
|
+ // 判断是否为跨层边(根据源和目标节点的层级)- 赋值给全局变量
|
|
|
+ isCrossLayerEdge = function(d) {{
|
|
|
+ const sourceNode = typeof d.source === "object" ? d.source : nodes.find(n => n.id === d.source);
|
|
|
+ const targetNode = typeof d.target === "object" ? d.target : nodes.find(n => n.id === d.target);
|
|
|
+ if (!sourceNode || !targetNode) return false;
|
|
|
+ return getNodeLayer(sourceNode) !== getNodeLayer(targetNode);
|
|
|
+ }};
|
|
|
+
|
|
|
+ // 设置跨层边的初始可见性(默认隐藏)
|
|
|
+ linkG.each(function(d) {{
|
|
|
+ if (isCrossLayerEdge(d) && !showCrossLayerEdges) {{
|
|
|
+ d3.select(this).style("display", "none");
|
|
|
+ }}
|
|
|
+ }});
|
|
|
+
|
|
|
+ // 为匹配边添加分数标签
|
|
|
+ const edgeLabels = linkG.filter(d => d.type === "匹配" && d.边详情 && d.边详情.相似度)
|
|
|
+ .append("g")
|
|
|
+ .attr("class", "edge-label-group");
|
|
|
+
|
|
|
+ edgeLabels.append("rect")
|
|
|
+ .attr("class", "edge-label-bg")
|
|
|
+ .attr("rx", 3)
|
|
|
+ .attr("ry", 3);
|
|
|
+
|
|
|
+ edgeLabels.append("text")
|
|
|
+ .attr("class", "edge-label")
|
|
|
+ .text(d => {{
|
|
|
+ const score = d.边详情.相似度;
|
|
|
+ return typeof score === "number" ? score.toFixed(2) : score;
|
|
|
+ }});
|
|
|
+
|
|
|
+ // 边的点击事件
|
|
|
+ linkHitarea.on("click", (event, d, i) => {{
|
|
|
+ event.stopPropagation();
|
|
|
+ const linkIndex = links.indexOf(d);
|
|
|
+ highlightEdge(d, linkIndex);
|
|
|
+ showEdgeInfo(d);
|
|
|
+ }})
|
|
|
+ .on("mouseover", function(event, d) {{
|
|
|
+ d3.select(this.parentNode).select(".link")
|
|
|
+ .attr("stroke-opacity", 1)
|
|
|
+ .attr("stroke-width", 4);
|
|
|
+ }})
|
|
|
+ .on("mouseout", function(event, d) {{
|
|
|
+ d3.select(this.parentNode).select(".link")
|
|
|
+ .attr("stroke-opacity", 0.7)
|
|
|
+ .attr("stroke-width", d.type === "匹配" ? 2.5 : 1.5);
|
|
|
+ }});
|
|
|
+
|
|
|
+ // 绘制节点
|
|
|
+ const node = g.append("g")
|
|
|
+ .selectAll("g")
|
|
|
+ .data(nodes)
|
|
|
+ .join("g")
|
|
|
+ .attr("class", "node")
|
|
|
+ .call(d3.drag()
|
|
|
+ .on("start", dragstarted)
|
|
|
+ .on("drag", dragged)
|
|
|
+ .on("end", dragended));
|
|
|
+
|
|
|
+ // 根据节点类型绘制不同形状
|
|
|
+ // - 点节点(帖子点):六边形
|
|
|
+ // - 标签节点:圆形
|
|
|
+ // - 分类节点:方形
|
|
|
+ // 帖子标签用虚线,人设标签用实线
|
|
|
+ node.each(function(d) {{
|
|
|
+ const el = d3.select(this);
|
|
|
+ const isPointNode = d.节点类型 === "点";
|
|
|
+ const isPostNode = d.source === "帖子";
|
|
|
+
|
|
|
+ // 节点大小
|
|
|
+ let size;
|
|
|
+ if (isPointNode) {{
|
|
|
+ size = 16; // 点节点最大
|
|
|
+ }} else if (isPostNode) {{
|
|
|
+ size = 12; // 帖子标签
|
|
|
+ }} else {{
|
|
|
+ size = 10; // 人设标签
|
|
|
+ }}
|
|
|
+
|
|
|
+ const fill = levelColors[d.level] || "#666";
|
|
|
+ const nodeClass = isPostNode
|
|
|
+ ? (isPointNode ? "post-point-node" : "post-node")
|
|
|
+ : "persona-node";
|
|
|
+
|
|
|
+ if (isPointNode) {{
|
|
|
+ // 六边形(点节点)
|
|
|
+ const hexPoints = [];
|
|
|
+ for (let i = 0; i < 6; i++) {{
|
|
|
+ const angle = (i * 60 - 30) * Math.PI / 180;
|
|
|
+ hexPoints.push([size * Math.cos(angle), size * Math.sin(angle)]);
|
|
|
+ }}
|
|
|
+ el.append("polygon")
|
|
|
+ .attr("points", hexPoints.map(p => p.join(",")).join(" "))
|
|
|
+ .attr("fill", fill)
|
|
|
+ .attr("class", nodeClass);
|
|
|
+ }} else if (d.节点类型 === "分类") {{
|
|
|
+ // 方形(分类节点)
|
|
|
+ el.append("rect")
|
|
|
+ .attr("width", size * 2)
|
|
|
+ .attr("height", size * 2)
|
|
|
+ .attr("x", -size)
|
|
|
+ .attr("y", -size)
|
|
|
+ .attr("fill", fill)
|
|
|
+ .attr("class", nodeClass)
|
|
|
+ .attr("rx", 3);
|
|
|
+ }} else {{
|
|
|
+ // 圆形(标签节点)
|
|
|
+ el.append("circle")
|
|
|
+ .attr("r", size)
|
|
|
+ .attr("fill", fill)
|
|
|
+ .attr("class", nodeClass);
|
|
|
+ }}
|
|
|
+ }});
|
|
|
+
|
|
|
+ const labels = node.append("text")
|
|
|
+ .attr("dx", 15)
|
|
|
+ .attr("dy", 4)
|
|
|
+ .text(d => d.节点名称)
|
|
|
+ .style("display", showLabels ? "block" : "none");
|
|
|
+
|
|
|
+ // 工具提示
|
|
|
+ const tooltip = d3.select("#tooltip");
|
|
|
+
|
|
|
+ node.on("mouseover", (event, d) => {{
|
|
|
+ let html = `<strong>${{d.节点名称}}</strong><br/>类型: ${{d.节点类型}}<br/>层级: ${{d.节点层级}}`;
|
|
|
+ // 点节点显示描述
|
|
|
+ if (d.描述) {{
|
|
|
+ html += `<br/><br/><em style="font-size:10px;color:#aaa">${{d.描述.slice(0, 100)}}${{d.描述.length > 100 ? '...' : ''}}</em>`;
|
|
|
+ }}
|
|
|
+ tooltip.style("display", "block").html(html);
|
|
|
+ }})
|
|
|
+ .on("mousemove", (event) => {{
|
|
|
+ tooltip.style("left", (event.pageX + 15) + "px")
|
|
|
+ .style("top", (event.pageY - 10) + "px");
|
|
|
+ }})
|
|
|
+ .on("mouseout", () => {{
|
|
|
+ tooltip.style("display", "none");
|
|
|
+ }})
|
|
|
+ .on("click", (event, d) => {{
|
|
|
+ event.stopPropagation();
|
|
|
+ highlightNode(d);
|
|
|
+ showNodeInfo(d);
|
|
|
+ }});
|
|
|
+
|
|
|
+ // 更新位置
|
|
|
+ simulation.on("tick", () => {{
|
|
|
+ // 更新热区线
|
|
|
+ linkHitarea
|
|
|
+ .attr("x1", d => d.source.x)
|
|
|
+ .attr("y1", d => d.source.y)
|
|
|
+ .attr("x2", d => d.target.x)
|
|
|
+ .attr("y2", d => d.target.y);
|
|
|
+
|
|
|
+ // 更新可见边
|
|
|
+ link
|
|
|
+ .attr("x1", d => d.source.x)
|
|
|
+ .attr("y1", d => d.source.y)
|
|
|
+ .attr("x2", d => d.target.x)
|
|
|
+ .attr("y2", d => d.target.y);
|
|
|
+
|
|
|
+ // 更新边标签位置(放在边的中点)
|
|
|
+ edgeLabels.attr("transform", d => {{
|
|
|
+ const midX = (d.source.x + d.target.x) / 2;
|
|
|
+ const midY = (d.source.y + d.target.y) / 2;
|
|
|
+ return `translate(${{midX}},${{midY}})`;
|
|
|
+ }});
|
|
|
+
|
|
|
+ // 更新标签背景大小
|
|
|
+ edgeLabels.each(function(d) {{
|
|
|
+ const textEl = d3.select(this).select("text").node();
|
|
|
+ if (textEl) {{
|
|
|
+ const bbox = textEl.getBBox();
|
|
|
+ d3.select(this).select("rect")
|
|
|
+ .attr("x", bbox.x - 3)
|
|
|
+ .attr("y", bbox.y - 1)
|
|
|
+ .attr("width", bbox.width + 6)
|
|
|
+ .attr("height", bbox.height + 2);
|
|
|
+ }}
|
|
|
+ }});
|
|
|
+
|
|
|
+ node.attr("transform", d => `translate(${{d.x}},${{d.y}})`);
|
|
|
+ }});
|
|
|
+
|
|
|
+ // 拖拽函数
|
|
|
+ function dragstarted(event, d) {{
|
|
|
+ if (!event.active) simulation.alphaTarget(0.3).restart();
|
|
|
+ d.fx = d.x;
|
|
|
+ d.fy = d.y;
|
|
|
+ }}
|
|
|
+
|
|
|
+ function dragged(event, d) {{
|
|
|
+ d.fx = event.x;
|
|
|
+ d.fy = event.y;
|
|
|
+ }}
|
|
|
+
|
|
|
+ function dragended(event, d) {{
|
|
|
+ if (!event.active) simulation.alphaTarget(0);
|
|
|
+ d.fx = null;
|
|
|
+ d.fy = null;
|
|
|
+ }}
|
|
|
+
|
|
|
+ // 清除所有高亮
|
|
|
+ function clearHighlight() {{
|
|
|
+ node.classed("dimmed", false).classed("highlighted", false);
|
|
|
+ linkG.classed("dimmed", false).classed("highlighted", false);
|
|
|
+
|
|
|
+ // 恢复跨层边的可见性状态(根据全局开关)
|
|
|
+ linkG.each(function(d) {{
|
|
|
+ if (isCrossLayerEdge(d)) {{
|
|
|
+ d3.select(this).style("display", showCrossLayerEdges ? "block" : "none");
|
|
|
+ }}
|
|
|
+ }});
|
|
|
+ }}
|
|
|
+
|
|
|
+ // 高亮指定的节点和边
|
|
|
+ function highlightElements(highlightNodeIds, highlightLinkIndices) {{
|
|
|
+ // 先灰化所有
|
|
|
+ node.classed("dimmed", true).classed("highlighted", false);
|
|
|
+ linkG.classed("dimmed", true).classed("highlighted", false);
|
|
|
+
|
|
|
+ // 高亮指定节点
|
|
|
+ node.filter(d => highlightNodeIds.has(d.id))
|
|
|
+ .classed("dimmed", false)
|
|
|
+ .classed("highlighted", true);
|
|
|
+
|
|
|
+ // 高亮指定边
|
|
|
+ linkG.filter((d, i) => highlightLinkIndices.has(i))
|
|
|
+ .classed("dimmed", false)
|
|
|
+ .classed("highlighted", true);
|
|
|
+ }}
|
|
|
+
|
|
|
+ // 点击节点时的高亮逻辑
|
|
|
+ function highlightNode(clickedNode) {{
|
|
|
+ const highlightNodeIds = new Set([clickedNode.id]);
|
|
|
+ const highlightLinkIndices = new Set();
|
|
|
+
|
|
|
+ links.forEach((link, i) => {{
|
|
|
+ const sourceId = typeof link.source === "object" ? link.source.id : link.source;
|
|
|
+ const targetId = typeof link.target === "object" ? link.target.id : link.target;
|
|
|
+
|
|
|
+ // 与点击节点直接相连的边
|
|
|
+ if (sourceId === clickedNode.id || targetId === clickedNode.id) {{
|
|
|
+ highlightLinkIndices.add(i);
|
|
|
+ highlightNodeIds.add(sourceId);
|
|
|
+ highlightNodeIds.add(targetId);
|
|
|
+
|
|
|
+ // 如果是帖子节点,还要高亮对应的镜像边
|
|
|
+ if (clickedNode.source === "帖子") {{
|
|
|
+ // 找到通过该帖子连接的其他帖子(镜像边)
|
|
|
+ links.forEach((otherLink, j) => {{
|
|
|
+ const otherType = otherLink.type;
|
|
|
+ if (otherType.startsWith("镜像_") || otherType.startsWith("二阶_")) {{
|
|
|
+ const oSrc = typeof otherLink.source === "object" ? otherLink.source.id : otherLink.source;
|
|
|
+ const oTgt = typeof otherLink.target === "object" ? otherLink.target.id : otherLink.target;
|
|
|
+ if (oSrc === clickedNode.id || oTgt === clickedNode.id) {{
|
|
|
+ highlightLinkIndices.add(j);
|
|
|
+ highlightNodeIds.add(oSrc);
|
|
|
+ highlightNodeIds.add(oTgt);
|
|
|
+ }}
|
|
|
+ }}
|
|
|
+ }});
|
|
|
+ }}
|
|
|
+ }}
|
|
|
+ }});
|
|
|
+
|
|
|
+ // 高亮相关的节点和边
|
|
|
+ highlightElements(highlightNodeIds, highlightLinkIndices);
|
|
|
+
|
|
|
+ // 临时显示关联的跨层边(即使全局开关是关闭的)
|
|
|
+ linkG.each(function(d, i) {{
|
|
|
+ if (highlightLinkIndices.has(i)) {{
|
|
|
+ d3.select(this).style("display", "block");
|
|
|
+ }}
|
|
|
+ }});
|
|
|
+ }}
|
|
|
+
|
|
|
+ // 点击边时的高亮逻辑
|
|
|
+ function highlightEdge(clickedLink, clickedIndex) {{
|
|
|
+ const highlightNodeIds = new Set();
|
|
|
+ const highlightLinkIndices = new Set([clickedIndex]);
|
|
|
+
|
|
|
+ const sourceId = typeof clickedLink.source === "object" ? clickedLink.source.id : clickedLink.source;
|
|
|
+ const targetId = typeof clickedLink.target === "object" ? clickedLink.target.id : clickedLink.target;
|
|
|
+
|
|
|
+ highlightNodeIds.add(sourceId);
|
|
|
+ highlightNodeIds.add(targetId);
|
|
|
+
|
|
|
+ // 如果是二阶边,显示完整路径
|
|
|
+ if (clickedLink.type.startsWith("二阶_") && clickedLink.边详情) {{
|
|
|
+ const detail = clickedLink.边详情;
|
|
|
+ // 分类节点
|
|
|
+ if (detail.分类节点1) highlightNodeIds.add(detail.分类节点1);
|
|
|
+ if (detail.分类节点2) highlightNodeIds.add(detail.分类节点2);
|
|
|
+ // 标签节点
|
|
|
+ if (detail.标签节点1) highlightNodeIds.add(detail.标签节点1);
|
|
|
+ if (detail.标签节点2) highlightNodeIds.add(detail.标签节点2);
|
|
|
+
|
|
|
+ // 找出路径上的边
|
|
|
+ links.forEach((link, i) => {{
|
|
|
+ const lSrc = typeof link.source === "object" ? link.source.id : link.source;
|
|
|
+ const lTgt = typeof link.target === "object" ? link.target.id : link.target;
|
|
|
+
|
|
|
+ // 帖子->标签 的匹配边
|
|
|
+ if (link.type === "匹配") {{
|
|
|
+ if ((lSrc === sourceId && lTgt === detail.标签节点1) ||
|
|
|
+ (lSrc === targetId && lTgt === detail.标签节点2)) {{
|
|
|
+ highlightLinkIndices.add(i);
|
|
|
+ }}
|
|
|
+ }}
|
|
|
+ // 标签->分类 的属于边
|
|
|
+ if (link.type === "属于") {{
|
|
|
+ if ((lSrc === detail.标签节点1 && lTgt === detail.分类节点1) ||
|
|
|
+ (lSrc === detail.标签节点2 && lTgt === detail.分类节点2)) {{
|
|
|
+ highlightLinkIndices.add(i);
|
|
|
+ }}
|
|
|
+ }}
|
|
|
+ // 分类之间的边
|
|
|
+ if ((lSrc === detail.分类节点1 && lTgt === detail.分类节点2) ||
|
|
|
+ (lSrc === detail.分类节点2 && lTgt === detail.分类节点1)) {{
|
|
|
+ highlightLinkIndices.add(i);
|
|
|
+ }}
|
|
|
+ }});
|
|
|
+ }}
|
|
|
+ // 如果是镜像边,显示对应的人设边
|
|
|
+ else if (clickedLink.type.startsWith("镜像_") && clickedLink.边详情) {{
|
|
|
+ const detail = clickedLink.边详情;
|
|
|
+ if (detail.源人设节点) highlightNodeIds.add(detail.源人设节点);
|
|
|
+ if (detail.目标人设节点) highlightNodeIds.add(detail.目标人设节点);
|
|
|
+
|
|
|
+ // 找出对应的人设边和匹配边
|
|
|
+ links.forEach((link, i) => {{
|
|
|
+ const lSrc = typeof link.source === "object" ? link.source.id : link.source;
|
|
|
+ const lTgt = typeof link.target === "object" ? link.target.id : link.target;
|
|
|
+
|
|
|
+ // 匹配边
|
|
|
+ if (link.type === "匹配") {{
|
|
|
+ if ((lSrc === sourceId && lTgt === detail.源人设节点) ||
|
|
|
+ (lSrc === targetId && lTgt === detail.目标人设节点)) {{
|
|
|
+ highlightLinkIndices.add(i);
|
|
|
+ }}
|
|
|
+ }}
|
|
|
+ // 人设边
|
|
|
+ if ((lSrc === detail.源人设节点 && lTgt === detail.目标人设节点) ||
|
|
|
+ (lSrc === detail.目标人设节点 && lTgt === detail.源人设节点)) {{
|
|
|
+ highlightLinkIndices.add(i);
|
|
|
+ }}
|
|
|
+ }});
|
|
|
+ }}
|
|
|
+
|
|
|
+ // 高亮相关的节点和边
|
|
|
+ highlightElements(highlightNodeIds, highlightLinkIndices);
|
|
|
+
|
|
|
+ // 临时显示关联的跨层边(即使全局开关是关闭的)
|
|
|
+ linkG.each(function(d, i) {{
|
|
|
+ if (highlightLinkIndices.has(i)) {{
|
|
|
+ d3.select(this).style("display", "block");
|
|
|
+ }}
|
|
|
+ }});
|
|
|
+ }}
|
|
|
+
|
|
|
+ // 点击空白处清除高亮(合并所有空白点击逻辑)
|
|
|
+ svg.on("click", (event) => {{
|
|
|
+ // 检查是否点击的是空白区域(svg本身或layer-backgrounds)
|
|
|
+ const isBlank = event.target === svg.node() ||
|
|
|
+ event.target.tagName === "svg" ||
|
|
|
+ event.target.classList.contains("layer-backgrounds");
|
|
|
+ if (isBlank) {{
|
|
|
+ // 清除右侧图高亮
|
|
|
+ clearHighlight();
|
|
|
+ // 清除人设树高亮
|
|
|
+ resetTreeHighlight();
|
|
|
+ resetGraphHighlight();
|
|
|
+ // 关闭详情面板
|
|
|
+ closeDetailPanel();
|
|
|
+ // 清除关系图
|
|
|
+ clearEgoGraph();
|
|
|
+ }}
|
|
|
+ }});
|
|
|
+ }}
|
|
|
+
|
|
|
+ // 控制函数
|
|
|
+ function resetZoom() {{
|
|
|
+ const container = document.getElementById("svg-container");
|
|
|
+ const width = container.clientWidth;
|
|
|
+ const height = container.clientHeight;
|
|
|
+ svg.transition().duration(750).call(
|
|
|
+ zoom.transform,
|
|
|
+ d3.zoomIdentity.translate(width/2, height/2).scale(1).translate(-width/2, -height/2)
|
|
|
+ );
|
|
|
+ }}
|
|
|
+
|
|
|
+ function toggleLabels() {{
|
|
|
+ showLabels = !showLabels;
|
|
|
+ g.selectAll(".node text").style("display", showLabels ? "block" : "none");
|
|
|
+ }}
|
|
|
+
|
|
|
+ // 切换跨层边显示
|
|
|
+ function toggleCrossLayerEdges() {{
|
|
|
+ showCrossLayerEdges = !showCrossLayerEdges;
|
|
|
+ const btn = document.getElementById("crossLayerBtn");
|
|
|
+ btn.textContent = showCrossLayerEdges ? "隐藏跨层边" : "显示跨层边";
|
|
|
+ btn.style.background = showCrossLayerEdges ? "#e94560" : "";
|
|
|
+
|
|
|
+ // 更新边的可见性(使用 isCrossLayerEdge 函数判断)
|
|
|
+ g.selectAll(".link-group").each(function(d) {{
|
|
|
+ if (isCrossLayerEdge(d)) {{
|
|
|
+ d3.select(this).style("display", showCrossLayerEdges ? "block" : "none");
|
|
|
+ }}
|
|
|
+ }});
|
|
|
+ }}
|
|
|
+
|
|
|
+ function showNodeInfo(d) {{
|
|
|
+ const panel = document.getElementById("detailPanel");
|
|
|
+ panel.classList.add("active");
|
|
|
+ document.getElementById("detailTitle").textContent = d.source === "帖子" ? "📌 帖子节点" : "👤 人设节点";
|
|
|
+
|
|
|
+ let html = `
|
|
|
+ <p><span class="label">节点ID:</span> ${{d.节点ID}}</p>
|
|
|
+ <p><span class="label">名称:</span> <strong>${{d.节点名称}}</strong></p>
|
|
|
+ <p><span class="label">类型:</span> ${{d.节点类型}}</p>
|
|
|
+ <p><span class="label">层级:</span> ${{d.节点层级}}</p>
|
|
|
+ `;
|
|
|
+
|
|
|
+ if (d.权重) {{
|
|
|
+ html += `<p><span class="label">权重:</span> ${{d.权重}}</p>`;
|
|
|
+ }}
|
|
|
+ if (d.所属分类 && d.所属分类.length > 0) {{
|
|
|
+ html += `<p><span class="label">所属分类:</span> ${{d.所属分类.join(" > ")}}</p>`;
|
|
|
+ }}
|
|
|
+ if (d.帖子数) {{
|
|
|
+ html += `<p><span class="label">帖子数:</span> ${{d.帖子数}}</p>`;
|
|
|
+ }}
|
|
|
+ document.getElementById("detailContent").innerHTML = html;
|
|
|
+ }}
|
|
|
+
|
|
|
+ // 显示人设树节点详情(包含入边、出边、相关节点)
|
|
|
+ function showTreeNodeDetail(nodeData, inEdges, outEdges) {{
|
|
|
+ const panel = document.getElementById("detailPanel");
|
|
|
+ panel.classList.add("active");
|
|
|
+ document.getElementById("detailTitle").textContent = "🌳 人设树节点";
|
|
|
+
|
|
|
+ // 节点基本信息
|
|
|
+ let html = `
|
|
|
+ <p><span class="label">名称:</span> <strong>${{nodeData.节点名称 || nodeData.name}}</strong></p>
|
|
|
+ <p><span class="label">类型:</span> ${{nodeData.节点类型 || (nodeData.isRoot ? "根节点" : "维度")}}</p>
|
|
|
+ <p><span class="label">层级:</span> ${{nodeData.节点层级 || "-"}}</p>
|
|
|
+ `;
|
|
|
+
|
|
|
+ if (nodeData.所属分类 && nodeData.所属分类.length > 0) {{
|
|
|
+ html += `<p><span class="label">所属分类:</span> ${{nodeData.所属分类.join(" > ")}}</p>`;
|
|
|
+ }}
|
|
|
+ if (nodeData.帖子数) {{
|
|
|
+ html += `<p><span class="label">帖子数:</span> ${{nodeData.帖子数}}</p>`;
|
|
|
+ }}
|
|
|
+
|
|
|
+ // 统计边类型
|
|
|
+ const inEdgeTypes = {{}};
|
|
|
+ const outEdgeTypes = {{}};
|
|
|
+ inEdges.forEach(e => {{ inEdgeTypes[e.边类型] = (inEdgeTypes[e.边类型] || 0) + 1; }});
|
|
|
+ outEdges.forEach(e => {{ outEdgeTypes[e.边类型] = (outEdgeTypes[e.边类型] || 0) + 1; }});
|
|
|
+
|
|
|
+ // 入边统计
|
|
|
+ html += `<h4 style="margin-top:12px;color:#3498db;font-size:12px;">📥 入边 (${{inEdges.length}})</h4>`;
|
|
|
+ if (inEdges.length > 0) {{
|
|
|
+ html += `<div class="edge-list">`;
|
|
|
+ for (const [type, count] of Object.entries(inEdgeTypes)) {{
|
|
|
+ html += `<div class="edge-type-item"><span class="edge-type">${{type}}</span><span class="edge-count">${{count}}</span></div>`;
|
|
|
+ }}
|
|
|
+ // 显示前5条入边详情
|
|
|
+ const showInEdges = inEdges.slice(0, 5);
|
|
|
+ showInEdges.forEach(e => {{
|
|
|
+ const srcName = personaTreeData.nodes.find(n => n.节点ID === e.源节点ID)?.节点名称 || e.源节点ID;
|
|
|
+ html += `<div class="edge-detail">← ${{srcName}} <span class="edge-type-tag">${{e.边类型}}</span></div>`;
|
|
|
+ }});
|
|
|
+ if (inEdges.length > 5) {{
|
|
|
+ html += `<div class="edge-more">... 还有 ${{inEdges.length - 5}} 条</div>`;
|
|
|
+ }}
|
|
|
+ html += `</div>`;
|
|
|
+ }} else {{
|
|
|
+ html += `<div class="edge-empty">无</div>`;
|
|
|
+ }}
|
|
|
+
|
|
|
+ // 出边统计
|
|
|
+ html += `<h4 style="margin-top:12px;color:#e74c3c;font-size:12px;">📤 出边 (${{outEdges.length}})</h4>`;
|
|
|
+ if (outEdges.length > 0) {{
|
|
|
+ html += `<div class="edge-list">`;
|
|
|
+ for (const [type, count] of Object.entries(outEdgeTypes)) {{
|
|
|
+ html += `<div class="edge-type-item"><span class="edge-type">${{type}}</span><span class="edge-count">${{count}}</span></div>`;
|
|
|
+ }}
|
|
|
+ // 显示前5条出边详情
|
|
|
+ const showOutEdges = outEdges.slice(0, 5);
|
|
|
+ showOutEdges.forEach(e => {{
|
|
|
+ const tgtName = personaTreeData.nodes.find(n => n.节点ID === e.目标节点ID)?.节点名称 || e.目标节点ID;
|
|
|
+ html += `<div class="edge-detail">→ ${{tgtName}} <span class="edge-type-tag">${{e.边类型}}</span></div>`;
|
|
|
+ }});
|
|
|
+ if (outEdges.length > 5) {{
|
|
|
+ html += `<div class="edge-more">... 还有 ${{outEdges.length - 5}} 条</div>`;
|
|
|
+ }}
|
|
|
+ html += `</div>`;
|
|
|
+ }} else {{
|
|
|
+ html += `<div class="edge-empty">无</div>`;
|
|
|
+ }}
|
|
|
+
|
|
|
+ document.getElementById("detailContent").innerHTML = html;
|
|
|
+ }}
|
|
|
+
|
|
|
+ function showEdgeInfo(d) {{
|
|
|
+ const panel = document.getElementById("detailPanel");
|
|
|
+ panel.classList.add("active");
|
|
|
+
|
|
|
+ const sourceNode = typeof d.source === "object" ? d.source : {{ id: d.source }};
|
|
|
+ const targetNode = typeof d.target === "object" ? d.target : {{ id: d.target }};
|
|
|
+
|
|
|
+ // 判断是否为镜像边
|
|
|
+ const isMirror = d.type.startsWith("镜像_");
|
|
|
+ document.getElementById("detailTitle").textContent = isMirror ? "🪞 镜像边详情" : "🔗 边详情";
|
|
|
+
|
|
|
+ let html = `
|
|
|
+ <p><span class="label">边类型:</span> <strong>${{d.type}}</strong></p>
|
|
|
+ <p><span class="label">源节点:</span> ${{sourceNode.节点名称 || sourceNode.id}}</p>
|
|
|
+ <p><span class="label">目标节点:</span> ${{targetNode.节点名称 || targetNode.id}}</p>
|
|
|
+ `;
|
|
|
+
|
|
|
+ if (d.边详情) {{
|
|
|
+ if (d.边详情.相似度 !== undefined) {{
|
|
|
+ const score = typeof d.边详情.相似度 === "number" ? d.边详情.相似度.toFixed(2) : d.边详情.相似度;
|
|
|
+ html += `<p><span class="label">相似度:</span> <span class="similarity-score">${{score}}</span></p>`;
|
|
|
+ }}
|
|
|
+ if (d.边详情.说明) {{
|
|
|
+ html += `<p><span class="label">说明:</span></p><div class="edge-description">${{d.边详情.说明}}</div>`;
|
|
|
+ }}
|
|
|
+ if (d.边详情.共现次数 !== undefined) {{
|
|
|
+ html += `<p><span class="label">共现次数:</span> ${{d.边详情.共现次数}}</p>`;
|
|
|
+ }}
|
|
|
+ // 镜像边特有信息
|
|
|
+ if (d.边详情.原始边类型) {{
|
|
|
+ html += `<p><span class="label">原始边类型:</span> ${{d.边详情.原始边类型}}</p>`;
|
|
|
+ }}
|
|
|
+ if (d.边详情.源人设节点) {{
|
|
|
+ html += `<p><span class="label">源人设节点:</span> ${{d.边详情.源人设节点}}</p>`;
|
|
|
+ }}
|
|
|
+ if (d.边详情.目标人设节点) {{
|
|
|
+ html += `<p><span class="label">目标人设节点:</span> ${{d.边详情.目标人设节点}}</p>`;
|
|
|
+ }}
|
|
|
+ }}
|
|
|
+
|
|
|
+ document.getElementById("detailContent").innerHTML = html;
|
|
|
+ }}
|
|
|
+
|
|
|
+ function closeDetailPanel() {{
|
|
|
+ document.getElementById("detailPanel").classList.remove("active");
|
|
|
+ }}
|
|
|
+
|
|
|
+ // 获取节点颜色(全局版本,根据节点数据判断维度)
|
|
|
+ function getTreeNodeColor(d) {{
|
|
|
+ const dimColors = {{ "灵感点": "#f39c12", "目的点": "#3498db", "关键点": "#9b59b6" }};
|
|
|
+ if (d.data.isRoot) return "#e94560";
|
|
|
+ if (d.data.isDimension) return d.data.dimColor;
|
|
|
+ return d.data.dimColor || "#888";
|
|
|
+ }}
|
|
|
+
|
|
|
+ // 共享的节点点击处理函数(人设树和关系图复用)
|
|
|
+ function handleNodeClick(clickedNodeId, clickedNodeName) {{
|
|
|
+ if (!clickedNodeId) return;
|
|
|
+
|
|
|
+ // 动态获取树相关元素
|
|
|
+ const treeGroup = d3.select(".persona-tree");
|
|
|
+ if (treeGroup.empty()) return;
|
|
|
+
|
|
|
+ const treeEdges = treeGroup.selectAll(".tree-edge");
|
|
|
+
|
|
|
+ // 先重置所有高亮状态
|
|
|
+ treeGroup.selectAll(".tree-node")
|
|
|
+ .classed("tree-dimmed", false)
|
|
|
+ .classed("tree-highlighted", false);
|
|
|
+ treeGroup.selectAll(".tree-node .tree-shape")
|
|
|
+ .attr("fill", d => getTreeNodeColor(d))
|
|
|
+ .attr("stroke", "rgba(255,255,255,0.5)")
|
|
|
+ .attr("stroke-width", 1)
|
|
|
+ .attr("stroke-opacity", 1)
|
|
|
+ .attr("opacity", 1);
|
|
|
+ treeGroup.selectAll(".tree-node text")
|
|
|
+ .attr("fill", d => (d.data.isRoot || d.data.isDimension) ? getTreeNodeColor(d) : "#bbb")
|
|
|
+ .attr("opacity", 1);
|
|
|
+ treeEdges.attr("stroke-opacity", 0.3).attr("stroke-width", 1);
|
|
|
+ if (g) {{
|
|
|
+ g.selectAll(".node").classed("dimmed", false).classed("highlighted", false);
|
|
|
+ g.selectAll(".link-group").classed("dimmed", false).classed("highlighted", false);
|
|
|
+ }}
|
|
|
+
|
|
|
+ // 构建节点ID到D3节点的映射
|
|
|
+ const treeNodeById = {{}};
|
|
|
+ treeGroup.selectAll(".tree-node").each(function(n) {{
|
|
|
+ if (n.data.节点ID) treeNodeById[n.data.节点ID] = n;
|
|
|
+ }});
|
|
|
+
|
|
|
+ // 查找所有与该节点相关的边
|
|
|
+ const allConnectedEdges = personaTreeData.edges.filter(e =>
|
|
|
+ e.源节点ID === clickedNodeId || e.目标节点ID === clickedNodeId
|
|
|
+ );
|
|
|
+
|
|
|
+ // 收集所有相关节点ID
|
|
|
+ const connectedNodeIds = new Set();
|
|
|
+ connectedNodeIds.add(clickedNodeId);
|
|
|
+ allConnectedEdges.forEach(e => {{
|
|
|
+ connectedNodeIds.add(e.源节点ID);
|
|
|
+ connectedNodeIds.add(e.目标节点ID);
|
|
|
+ }});
|
|
|
+
|
|
|
+ // 获取D3树节点
|
|
|
+ const clickedD3Node = treeNodeById[clickedNodeId];
|
|
|
+
|
|
|
+ // 也添加树结构中的父子节点
|
|
|
+ if (clickedD3Node) {{
|
|
|
+ if (clickedD3Node.parent && clickedD3Node.parent.data.节点ID) {{
|
|
|
+ connectedNodeIds.add(clickedD3Node.parent.data.节点ID);
|
|
|
+ }}
|
|
|
+ if (clickedD3Node.children) {{
|
|
|
+ clickedD3Node.children.forEach(c => {{
|
|
|
+ if (c.data.节点ID) connectedNodeIds.add(c.data.节点ID);
|
|
|
+ }});
|
|
|
+ }}
|
|
|
+ }}
|
|
|
+
|
|
|
+ // 转换为D3节点集合
|
|
|
+ const connectedD3Nodes = new Set();
|
|
|
+ if (clickedD3Node) connectedD3Nodes.add(clickedD3Node);
|
|
|
+ connectedNodeIds.forEach(id => {{
|
|
|
+ if (treeNodeById[id]) connectedD3Nodes.add(treeNodeById[id]);
|
|
|
+ }});
|
|
|
+ if (clickedD3Node) {{
|
|
|
+ if (clickedD3Node.parent) connectedD3Nodes.add(clickedD3Node.parent);
|
|
|
+ if (clickedD3Node.children) clickedD3Node.children.forEach(c => connectedD3Nodes.add(c));
|
|
|
+ }}
|
|
|
+
|
|
|
+ // 高亮树中的节点
|
|
|
+ treeGroup.selectAll(".tree-node")
|
|
|
+ .classed("tree-dimmed", n => !connectedD3Nodes.has(n))
|
|
|
+ .classed("tree-highlighted", n => connectedD3Nodes.has(n));
|
|
|
+
|
|
|
+ // 高亮所有形状(不变粗)
|
|
|
+ treeGroup.selectAll(".tree-node .tree-shape")
|
|
|
+ .attr("fill", function(n) {{
|
|
|
+ if (!connectedD3Nodes.has(n)) return "#555";
|
|
|
+ return getTreeNodeColor(n);
|
|
|
+ }})
|
|
|
+ .attr("stroke", function(n) {{
|
|
|
+ if (n.data.节点ID === clickedNodeId) return "#fff";
|
|
|
+ return connectedD3Nodes.has(n) ? "rgba(255,255,255,0.8)" : "#333";
|
|
|
+ }})
|
|
|
+ .attr("stroke-opacity", 1);
|
|
|
+
|
|
|
+ treeGroup.selectAll(".tree-node text")
|
|
|
+ .attr("fill", function(n) {{
|
|
|
+ if (!connectedD3Nodes.has(n)) return "#555";
|
|
|
+ return (n.data.isRoot || n.data.isDimension) ? getTreeNodeColor(n) : "#bbb";
|
|
|
+ }});
|
|
|
+
|
|
|
+ // 边高亮
|
|
|
+ treeEdges.attr("stroke-opacity", function(e) {{
|
|
|
+ const isConnected = (e.源节点ID === clickedNodeId || e.目标节点ID === clickedNodeId) ||
|
|
|
+ (e.isTreeLink && (e.源节点ID === clickedNodeName || e.目标节点ID === clickedNodeName));
|
|
|
+ return isConnected ? 0.9 : 0.15;
|
|
|
+ }});
|
|
|
+
|
|
|
+ // 计算入边和出边
|
|
|
+ const inEdges = allConnectedEdges.filter(e => e.目标节点ID === clickedNodeId);
|
|
|
+ const outEdges = allConnectedEdges.filter(e => e.源节点ID === clickedNodeId);
|
|
|
+
|
|
|
+ // 显示详情面板
|
|
|
+ const nodeData = personaTreeData.nodes.find(n => n.节点ID === clickedNodeId);
|
|
|
+ if (nodeData) {{
|
|
|
+ showTreeNodeDetail(nodeData, inEdges, outEdges);
|
|
|
+ }}
|
|
|
+
|
|
|
+ // 显示关系子图
|
|
|
+ renderEgoGraph(clickedNodeId, clickedNodeName);
|
|
|
+
|
|
|
+ // 高亮右侧图中对应节点
|
|
|
+ if (g) {{
|
|
|
+ const graphNode = g.selectAll(".node").filter(n => n.节点ID === clickedNodeId);
|
|
|
+ if (!graphNode.empty()) {{
|
|
|
+ g.selectAll(".node").classed("dimmed", true).classed("highlighted", false);
|
|
|
+ g.selectAll(".link-group").classed("dimmed", true).classed("highlighted", false);
|
|
|
+ graphNode.classed("dimmed", false).classed("highlighted", true);
|
|
|
+ }}
|
|
|
+ }}
|
|
|
+ }}
|
|
|
+
|
|
|
+ // 共享的边点击处理函数(人设树和关系图复用)
|
|
|
+ function handleEdgeClick(srcNodeId, tgtNodeId, edgeType) {{
|
|
|
+ // 动态获取树相关元素
|
|
|
+ const treeGroup = d3.select(".persona-tree");
|
|
|
+ if (treeGroup.empty()) return;
|
|
|
+
|
|
|
+ const treeEdges = treeGroup.selectAll(".tree-edge");
|
|
|
+
|
|
|
+ // 先重置所有高亮状态
|
|
|
+ treeGroup.selectAll(".tree-node")
|
|
|
+ .classed("tree-dimmed", false)
|
|
|
+ .classed("tree-highlighted", false);
|
|
|
+ treeGroup.selectAll(".tree-node .tree-shape")
|
|
|
+ .attr("fill", d => getTreeNodeColor(d))
|
|
|
+ .attr("stroke", "rgba(255,255,255,0.5)")
|
|
|
+ .attr("stroke-width", 1)
|
|
|
+ .attr("stroke-opacity", 1)
|
|
|
+ .attr("opacity", 1);
|
|
|
+ treeGroup.selectAll(".tree-node text")
|
|
|
+ .attr("fill", d => (d.data.isRoot || d.data.isDimension) ? getTreeNodeColor(d) : "#bbb")
|
|
|
+ .attr("opacity", 1);
|
|
|
+ treeEdges.attr("stroke-opacity", 0.3).attr("stroke-width", 1);
|
|
|
+ if (g) {{
|
|
|
+ g.selectAll(".node").classed("dimmed", false).classed("highlighted", false);
|
|
|
+ g.selectAll(".link-group").classed("dimmed", false).classed("highlighted", false);
|
|
|
+ }}
|
|
|
+
|
|
|
+ // 构建节点ID到D3节点的映射
|
|
|
+ const treeNodeById = {{}};
|
|
|
+ treeGroup.selectAll(".tree-node").each(function(n) {{
|
|
|
+ if (n.data.节点ID) treeNodeById[n.data.节点ID] = n;
|
|
|
+ }});
|
|
|
+
|
|
|
+ const sourceTreeNode = treeNodeById[srcNodeId];
|
|
|
+ const targetTreeNode = treeNodeById[tgtNodeId];
|
|
|
+
|
|
|
+ // 高亮树边(不变粗)
|
|
|
+ treeEdges.attr("stroke-opacity", function(e) {{
|
|
|
+ const isThisEdge = (e.源节点ID === srcNodeId && e.目标节点ID === tgtNodeId) ||
|
|
|
+ (e.源节点ID === tgtNodeId && e.目标节点ID === srcNodeId);
|
|
|
+ return isThisEdge ? 1 : 0.1;
|
|
|
+ }});
|
|
|
+
|
|
|
+ // 高亮相关节点
|
|
|
+ const connectedNodes = new Set();
|
|
|
+ if (sourceTreeNode) connectedNodes.add(sourceTreeNode);
|
|
|
+ if (targetTreeNode) connectedNodes.add(targetTreeNode);
|
|
|
+
|
|
|
+ treeGroup.selectAll(".tree-node .tree-shape")
|
|
|
+ .attr("fill", n => connectedNodes.has(n) ? getTreeNodeColor(n) : "#555")
|
|
|
+ .attr("opacity", 1);
|
|
|
+
|
|
|
+ treeGroup.selectAll(".tree-node text")
|
|
|
+ .attr("fill", n => connectedNodes.has(n) ?
|
|
|
+ ((n.data.isRoot || n.data.isDimension) ? getTreeNodeColor(n) : "#bbb") : "#555")
|
|
|
+ .attr("opacity", 1);
|
|
|
+
|
|
|
+ // 显示边详情
|
|
|
+ const panel = document.getElementById("detailPanel");
|
|
|
+ panel.classList.add("active");
|
|
|
+ document.getElementById("detailTitle").textContent = "🔗 边详情";
|
|
|
+
|
|
|
+ const srcNode = personaTreeData.nodes.find(n => n.节点ID === srcNodeId);
|
|
|
+ const tgtNode = personaTreeData.nodes.find(n => n.节点ID === tgtNodeId);
|
|
|
+ const srcName = sourceTreeNode ? (sourceTreeNode.data.节点名称 || sourceTreeNode.data.name) : (srcNode?.节点名称 || srcNodeId);
|
|
|
+ const tgtName = targetTreeNode ? (targetTreeNode.data.节点名称 || targetTreeNode.data.name) : (tgtNode?.节点名称 || tgtNodeId);
|
|
|
+
|
|
|
+ let html = `
|
|
|
+ <p><span class="label">边类型:</span> <strong>${{edgeType}}</strong></p>
|
|
|
+ <p><span class="label">源节点:</span> ${{srcName}}</p>
|
|
|
+ <p><span class="label">目标节点:</span> ${{tgtName}}</p>
|
|
|
+ `;
|
|
|
+ document.getElementById("detailContent").innerHTML = html;
|
|
|
+
|
|
|
+ // 在关系图中展示这条边和两个节点
|
|
|
+ const edgeData = {{
|
|
|
+ 边类型: edgeType,
|
|
|
+ 源节点ID: srcNodeId,
|
|
|
+ 目标节点ID: tgtNodeId
|
|
|
+ }};
|
|
|
+ renderEgoGraphEdge(edgeData, sourceTreeNode, targetTreeNode);
|
|
|
+ }}
|
|
|
+
|
|
|
+ // 关系子图(Ego Graph)- 在画布第四层显示
|
|
|
+ let currentEgoSimulation = null; // 保存当前的力模拟,用于停止
|
|
|
+
|
|
|
+ function renderEgoGraph(centerNodeId, centerNodeName) {{
|
|
|
+ // 获取关系图层组
|
|
|
+ const egoGroup = d3.select(".ego-graph-content");
|
|
|
+ if (egoGroup.empty()) return;
|
|
|
+
|
|
|
+ // 停止之前的模拟
|
|
|
+ if (currentEgoSimulation) {{
|
|
|
+ currentEgoSimulation.stop();
|
|
|
+ currentEgoSimulation = null;
|
|
|
+ }}
|
|
|
+
|
|
|
+ // 清除旧内容
|
|
|
+ egoGroup.selectAll("*").remove();
|
|
|
+
|
|
|
+ // 隐藏占位提示
|
|
|
+ d3.select(".ego-placeholder").style("display", "none");
|
|
|
+
|
|
|
+ // 获取层半径(需要从全局获取或重新计算)
|
|
|
+ const radius = 120; // 固定半径
|
|
|
+
|
|
|
+ // 找到所有相关的边
|
|
|
+ const relatedEdges = personaTreeData.edges.filter(e =>
|
|
|
+ e.源节点ID === centerNodeId || e.目标节点ID === centerNodeId
|
|
|
+ );
|
|
|
+
|
|
|
+ // 收集所有相关节点ID
|
|
|
+ const nodeIds = new Set([centerNodeId]);
|
|
|
+ relatedEdges.forEach(e => {{
|
|
|
+ nodeIds.add(e.源节点ID);
|
|
|
+ nodeIds.add(e.目标节点ID);
|
|
|
+ }});
|
|
|
+
|
|
|
+ // 构建节点数据
|
|
|
+ const nodeMap = {{}};
|
|
|
+ personaTreeData.nodes.forEach(n => {{
|
|
|
+ if (nodeIds.has(n.节点ID)) {{
|
|
|
+ nodeMap[n.节点ID] = {{
|
|
|
+ id: n.节点ID,
|
|
|
+ name: n.节点名称,
|
|
|
+ type: n.节点类型,
|
|
|
+ level: n.节点层级,
|
|
|
+ isCenter: n.节点ID === centerNodeId
|
|
|
+ }};
|
|
|
+ }}
|
|
|
+ }});
|
|
|
+
|
|
|
+ const nodes = Object.values(nodeMap);
|
|
|
+ const links = relatedEdges.map(e => ({{
|
|
|
+ source: e.源节点ID,
|
|
|
+ target: e.目标节点ID,
|
|
|
+ type: e.边类型
|
|
|
+ }}));
|
|
|
+
|
|
|
+ // 根据节点数量动态计算实际使用的半径
|
|
|
+ const nodeCount = nodes.length;
|
|
|
+ const nodeSpacingEgo = 65; // 节点间距(增大)
|
|
|
+ const minEgoRadius = 120;
|
|
|
+ const maxEgoRadius = Math.max(radius, 250); // 允许更大的半径
|
|
|
+ let actualRadius;
|
|
|
+ if (nodeCount <= 1) {{
|
|
|
+ actualRadius = minEgoRadius;
|
|
|
+ }} else {{
|
|
|
+ const circumference = nodeCount * nodeSpacingEgo;
|
|
|
+ const calcR = circumference / (2 * Math.PI);
|
|
|
+ actualRadius = Math.max(minEgoRadius, Math.min(maxEgoRadius, calcR));
|
|
|
+ }}
|
|
|
+
|
|
|
+ // 显示节点名称作为标题
|
|
|
+ egoGroup.append("text")
|
|
|
+ .attr("class", "ego-title")
|
|
|
+ .attr("y", -actualRadius - 15)
|
|
|
+ .attr("text-anchor", "middle")
|
|
|
+ .attr("fill", "#e94560")
|
|
|
+ .attr("font-size", "12px")
|
|
|
+ .attr("font-weight", "bold")
|
|
|
+ .text(centerNodeName + ` (${{nodeCount}}个节点)`);
|
|
|
+
|
|
|
+ // 如果没有相关节点,显示提示
|
|
|
+ if (nodes.length <= 1) {{
|
|
|
+ egoGroup.append("text")
|
|
|
+ .attr("text-anchor", "middle")
|
|
|
+ .attr("fill", "rgba(255,255,255,0.4)")
|
|
|
+ .attr("font-size", "11px")
|
|
|
+ .text("该节点没有相关边");
|
|
|
+ return;
|
|
|
+ }}
|
|
|
+
|
|
|
+ // 边类型颜色(统一用实线)
|
|
|
+ const edgeColors = {{
|
|
|
+ "属于": "#9b59b6", // 紫色 - 层级关系
|
|
|
+ "分类共现(跨点)": "#2ecc71", // 绿色 - 跨帖子分类共现
|
|
|
+ "分类共现(点内)": "#3498db", // 蓝色 - 同帖子分类共现
|
|
|
+ "标签共现": "#f39c12" // 橙色 - 标签共现
|
|
|
+ }};
|
|
|
+
|
|
|
+ // 维度颜色(与人设树完全一致)
|
|
|
+ const dimColors = {{
|
|
|
+ "灵感点": "#f39c12",
|
|
|
+ "目的点": "#3498db",
|
|
|
+ "关键点": "#9b59b6"
|
|
|
+ }};
|
|
|
+
|
|
|
+ // 获取节点的维度颜色(与人设树一致)
|
|
|
+ function getNodeDimColor(d) {{
|
|
|
+ // 根据节点层级判断维度
|
|
|
+ const level = d.level || "";
|
|
|
+ if (level.includes("灵感点")) return dimColors["灵感点"];
|
|
|
+ if (level.includes("目的点")) return dimColors["目的点"];
|
|
|
+ if (level.includes("关键点")) return dimColors["关键点"];
|
|
|
+ return "#888";
|
|
|
+ }}
|
|
|
+
|
|
|
+ // 获取节点填充色(实心,用维度颜色,不因选中而改变)
|
|
|
+ function getNodeFill(d) {{
|
|
|
+ return getNodeDimColor(d); // 始终用维度颜色填充
|
|
|
+ }}
|
|
|
+
|
|
|
+ // 获取节点边框色(选中节点用白色边框区分)
|
|
|
+ function getNodeStroke(d) {{
|
|
|
+ if (d.isCenter) return "#fff"; // 选中节点白色边框
|
|
|
+ return "rgba(255,255,255,0.5)"; // 普通节点半透明白边框
|
|
|
+ }}
|
|
|
+
|
|
|
+ // 获取节点边框粗细(选中节点更粗)
|
|
|
+ function getNodeStrokeWidth(d) {{
|
|
|
+ return d.isCenter ? 3 : 1.5;
|
|
|
+ }}
|
|
|
+
|
|
|
+ // 根据节点数量调整力模拟参数
|
|
|
+ const linkDistance = Math.max(50, Math.min(80, actualRadius / 2.5));
|
|
|
+ const chargeStrength = Math.max(-300, Math.min(-100, -nodeCount * 10));
|
|
|
+ const collisionRadius = 35; // 碰撞半径,防止重叠
|
|
|
+
|
|
|
+ // 创建力导向模拟(中心在0,0因为已经平移了)
|
|
|
+ const simulation = d3.forceSimulation(nodes)
|
|
|
+ .force("link", d3.forceLink(links).id(d => d.id).distance(linkDistance))
|
|
|
+ .force("charge", d3.forceManyBody().strength(chargeStrength))
|
|
|
+ .force("center", d3.forceCenter(0, 0))
|
|
|
+ .force("collision", d3.forceCollide().radius(collisionRadius))
|
|
|
+ .force("boundary", function() {{
|
|
|
+ // 限制节点在圆形区域内
|
|
|
+ const maxR = actualRadius - 30;
|
|
|
+ return function(alpha) {{
|
|
|
+ nodes.forEach(d => {{
|
|
|
+ const dist = Math.sqrt(d.x * d.x + d.y * d.y);
|
|
|
+ if (dist > maxR) {{
|
|
|
+ const scale = maxR / dist;
|
|
|
+ d.x *= scale;
|
|
|
+ d.y *= scale;
|
|
|
+ }}
|
|
|
+ }});
|
|
|
+ }};
|
|
|
+ }}());
|
|
|
+
|
|
|
+ currentEgoSimulation = simulation;
|
|
|
+
|
|
|
+ // 绘制边(统一用实线)
|
|
|
+ const link = egoGroup.selectAll(".ego-edge")
|
|
|
+ .data(links)
|
|
|
+ .join("line")
|
|
|
+ .attr("class", "ego-edge")
|
|
|
+ .attr("stroke", d => edgeColors[d.type] || "#666")
|
|
|
+ .attr("stroke-width", 1.5)
|
|
|
+ .attr("stroke-opacity", 0.7);
|
|
|
+
|
|
|
+ // 绘制节点(分类用方形,标签用圆形)
|
|
|
+ const node = egoGroup.selectAll(".ego-node")
|
|
|
+ .data(nodes)
|
|
|
+ .join("g")
|
|
|
+ .attr("class", d => "ego-node" + (d.isCenter ? " center" : ""));
|
|
|
+
|
|
|
+ // 根据节点类型绘制不同形状(与人设树样式一致)
|
|
|
+ const nodeSize = 8;
|
|
|
+ node.each(function(d) {{
|
|
|
+ const el = d3.select(this);
|
|
|
+ const fill = getNodeFill(d);
|
|
|
+ const stroke = getNodeStroke(d);
|
|
|
+ const size = d.isCenter ? nodeSize + 2 : nodeSize;
|
|
|
+ const strokeWidth = getNodeStrokeWidth(d);
|
|
|
+
|
|
|
+ if (d.type === "分类") {{
|
|
|
+ // 方形(分类节点)- 与人设树一致
|
|
|
+ el.append("rect")
|
|
|
+ .attr("class", "ego-shape")
|
|
|
+ .attr("width", size * 2)
|
|
|
+ .attr("height", size * 2)
|
|
|
+ .attr("x", -size)
|
|
|
+ .attr("y", -size)
|
|
|
+ .attr("fill", fill)
|
|
|
+ .attr("stroke", stroke)
|
|
|
+ .attr("stroke-width", strokeWidth)
|
|
|
+ .attr("rx", 1);
|
|
|
+ }} else {{
|
|
|
+ // 圆形(标签节点)- 与人设树一致
|
|
|
+ el.append("circle")
|
|
|
+ .attr("class", "ego-shape")
|
|
|
+ .attr("r", size)
|
|
|
+ .attr("fill", fill)
|
|
|
+ .attr("stroke", stroke)
|
|
|
+ .attr("stroke-width", strokeWidth);
|
|
|
+ }}
|
|
|
+ }});
|
|
|
+
|
|
|
+ node.append("text")
|
|
|
+ .attr("dy", -12)
|
|
|
+ .attr("text-anchor", "middle")
|
|
|
+ .attr("font-size", "9px")
|
|
|
+ .attr("fill", "#fff")
|
|
|
+ .text(d => d.name.length > 6 ? d.name.substring(0, 6) + ".." : d.name);
|
|
|
+
|
|
|
+ // 添加点击事件(直接调用共享函数)
|
|
|
+ node.on("click", function(event, d) {{
|
|
|
+ event.stopPropagation();
|
|
|
+ handleNodeClick(d.id, d.name);
|
|
|
+ }});
|
|
|
+
|
|
|
+ // 边点击事件(直接调用共享函数)
|
|
|
+ link.on("click", function(event, d) {{
|
|
|
+ event.stopPropagation();
|
|
|
+ handleEdgeClick(d.source.id, d.target.id, d.type);
|
|
|
+ }});
|
|
|
+
|
|
|
+ // 更新位置
|
|
|
+ simulation.on("tick", () => {{
|
|
|
+ link
|
|
|
+ .attr("x1", d => d.source.x)
|
|
|
+ .attr("y1", d => d.source.y)
|
|
|
+ .attr("x2", d => d.target.x)
|
|
|
+ .attr("y2", d => d.target.y);
|
|
|
+
|
|
|
+ node.attr("transform", d => `translate(${{d.x}},${{d.y}})`);
|
|
|
+ }});
|
|
|
+ }}
|
|
|
+
|
|
|
+ function clearEgoGraph() {{
|
|
|
+ const egoGroup = d3.select(".ego-graph-content");
|
|
|
+ if (!egoGroup.empty()) {{
|
|
|
+ egoGroup.selectAll("*").remove();
|
|
|
+ }}
|
|
|
+ // 显示占位提示
|
|
|
+ d3.select(".ego-placeholder").style("display", null);
|
|
|
+ // 停止模拟
|
|
|
+ if (currentEgoSimulation) {{
|
|
|
+ currentEgoSimulation.stop();
|
|
|
+ currentEgoSimulation = null;
|
|
|
+ }}
|
|
|
+ }}
|
|
|
+
|
|
|
+ // 渲染单条边和两个节点(点击树边时调用)
|
|
|
+ function renderEgoGraphEdge(edgeData, sourceNode, targetNode) {{
|
|
|
+ const egoGroup = d3.select(".ego-graph-content");
|
|
|
+ if (egoGroup.empty()) return;
|
|
|
+
|
|
|
+ // 停止之前的模拟
|
|
|
+ if (currentEgoSimulation) {{
|
|
|
+ currentEgoSimulation.stop();
|
|
|
+ currentEgoSimulation = null;
|
|
|
+ }}
|
|
|
+
|
|
|
+ // 清除旧内容
|
|
|
+ egoGroup.selectAll("*").remove();
|
|
|
+ d3.select(".ego-placeholder").style("display", "none");
|
|
|
+
|
|
|
+ const radius = 250;
|
|
|
+
|
|
|
+ // 边类型颜色
|
|
|
+ const edgeColors = {{
|
|
|
+ "属于": "#9b59b6",
|
|
|
+ "分类共现(跨点)": "#2ecc71",
|
|
|
+ "分类共现(点内)": "#3498db",
|
|
|
+ "标签共现": "#f39c12"
|
|
|
+ }};
|
|
|
+
|
|
|
+ // 维度颜色
|
|
|
+ const dimColors = {{
|
|
|
+ "灵感点": "#f39c12",
|
|
|
+ "目的点": "#3498db",
|
|
|
+ "关键点": "#9b59b6"
|
|
|
+ }};
|
|
|
+
|
|
|
+ // 获取节点颜色
|
|
|
+ function getNodeColor(nodeData) {{
|
|
|
+ const level = nodeData.节点层级 || "";
|
|
|
+ if (level.includes("灵感点")) return dimColors["灵感点"];
|
|
|
+ if (level.includes("目的点")) return dimColors["目的点"];
|
|
|
+ if (level.includes("关键点")) return dimColors["关键点"];
|
|
|
+ return "#888";
|
|
|
+ }}
|
|
|
+
|
|
|
+ // 标题
|
|
|
+ egoGroup.append("text")
|
|
|
+ .attr("class", "ego-title")
|
|
|
+ .attr("y", -80)
|
|
|
+ .attr("text-anchor", "middle")
|
|
|
+ .attr("fill", edgeColors[edgeData.边类型] || "#666")
|
|
|
+ .attr("font-size", "12px")
|
|
|
+ .attr("font-weight", "bold")
|
|
|
+ .text(`${{edgeData.边类型}}`);
|
|
|
+
|
|
|
+ // 两个节点的位置
|
|
|
+ const srcX = -60, srcY = 0;
|
|
|
+ const tgtX = 60, tgtY = 0;
|
|
|
+
|
|
|
+ // 绘制边
|
|
|
+ egoGroup.append("line")
|
|
|
+ .attr("class", "ego-edge")
|
|
|
+ .attr("x1", srcX)
|
|
|
+ .attr("y1", srcY)
|
|
|
+ .attr("x2", tgtX)
|
|
|
+ .attr("y2", tgtY)
|
|
|
+ .attr("stroke", edgeColors[edgeData.边类型] || "#666")
|
|
|
+ .attr("stroke-width", 3)
|
|
|
+ .attr("stroke-opacity", 0.8);
|
|
|
+
|
|
|
+ // 获取节点数据
|
|
|
+ const srcData = sourceNode ? sourceNode.data : {{}};
|
|
|
+ const tgtData = targetNode ? targetNode.data : {{}};
|
|
|
+
|
|
|
+ // 绘制源节点
|
|
|
+ const srcGroup = egoGroup.append("g")
|
|
|
+ .attr("class", "ego-node")
|
|
|
+ .attr("transform", `translate(${{srcX}}, ${{srcY}})`);
|
|
|
+
|
|
|
+ const srcSize = 15;
|
|
|
+ const srcColor = getNodeColor(srcData);
|
|
|
+ if (srcData.节点类型 === "分类") {{
|
|
|
+ srcGroup.append("rect")
|
|
|
+ .attr("width", srcSize * 2)
|
|
|
+ .attr("height", srcSize * 2)
|
|
|
+ .attr("x", -srcSize)
|
|
|
+ .attr("y", -srcSize)
|
|
|
+ .attr("fill", srcColor)
|
|
|
+ .attr("stroke", "rgba(255,255,255,0.5)")
|
|
|
+ .attr("stroke-width", 2)
|
|
|
+ .attr("rx", 2);
|
|
|
+ }} else {{
|
|
|
+ srcGroup.append("circle")
|
|
|
+ .attr("r", srcSize)
|
|
|
+ .attr("fill", srcColor)
|
|
|
+ .attr("stroke", "rgba(255,255,255,0.5)")
|
|
|
+ .attr("stroke-width", 2);
|
|
|
+ }}
|
|
|
+ srcGroup.append("text")
|
|
|
+ .attr("dy", -srcSize - 8)
|
|
|
+ .attr("text-anchor", "middle")
|
|
|
+ .attr("fill", "#fff")
|
|
|
+ .attr("font-size", "11px")
|
|
|
+ .text(srcData.节点名称 || srcData.name || "源节点");
|
|
|
+
|
|
|
+ // 绘制目标节点
|
|
|
+ const tgtGroup = egoGroup.append("g")
|
|
|
+ .attr("class", "ego-node")
|
|
|
+ .attr("transform", `translate(${{tgtX}}, ${{tgtY}})`);
|
|
|
+
|
|
|
+ const tgtSize = 15;
|
|
|
+ const tgtColor = getNodeColor(tgtData);
|
|
|
+ if (tgtData.节点类型 === "分类") {{
|
|
|
+ tgtGroup.append("rect")
|
|
|
+ .attr("width", tgtSize * 2)
|
|
|
+ .attr("height", tgtSize * 2)
|
|
|
+ .attr("x", -tgtSize)
|
|
|
+ .attr("y", -tgtSize)
|
|
|
+ .attr("fill", tgtColor)
|
|
|
+ .attr("stroke", "rgba(255,255,255,0.5)")
|
|
|
+ .attr("stroke-width", 2)
|
|
|
+ .attr("rx", 2);
|
|
|
+ }} else {{
|
|
|
+ tgtGroup.append("circle")
|
|
|
+ .attr("r", tgtSize)
|
|
|
+ .attr("fill", tgtColor)
|
|
|
+ .attr("stroke", "rgba(255,255,255,0.5)")
|
|
|
+ .attr("stroke-width", 2);
|
|
|
+ }}
|
|
|
+ tgtGroup.append("text")
|
|
|
+ .attr("dy", -tgtSize - 8)
|
|
|
+ .attr("text-anchor", "middle")
|
|
|
+ .attr("fill", "#fff")
|
|
|
+ .attr("font-size", "11px")
|
|
|
+ .text(tgtData.节点名称 || tgtData.name || "目标节点");
|
|
|
+
|
|
|
+ // 边标签
|
|
|
+ egoGroup.append("text")
|
|
|
+ .attr("y", 25)
|
|
|
+ .attr("text-anchor", "middle")
|
|
|
+ .attr("fill", "rgba(255,255,255,0.6)")
|
|
|
+ .attr("font-size", "10px")
|
|
|
+ .text(edgeData.边类型);
|
|
|
+ }}
|
|
|
+
|
|
|
+ // 页面加载完成后初始化
|
|
|
+ window.addEventListener("load", init);
|
|
|
+ window.addEventListener("resize", () => {{
|
|
|
+ if (currentIndex >= 0) {{
|
|
|
+ renderGraph(allGraphData[currentIndex]);
|
|
|
+ }}
|
|
|
+ }});
|
|
|
+ </script>
|
|
|
+</body>
|
|
|
+</html>
|
|
|
+'''
|
|
|
+
|
|
|
+
|
|
|
+def generate_combined_html(all_graph_data: List[Dict], persona_tree_data: Dict, output_file: Path):
|
|
|
+ """
|
|
|
+ 生成包含所有帖子图谱的HTML文件
|
|
|
+
|
|
|
+ Args:
|
|
|
+ all_graph_data: 所有帖子的图谱数据列表
|
|
|
+ persona_tree_data: 完整的人设树数据(节点和边)
|
|
|
+ output_file: 输出文件路径
|
|
|
+ """
|
|
|
+ # 生成Tab HTML
|
|
|
+ tabs_html = ""
|
|
|
+ for i, data in enumerate(all_graph_data):
|
|
|
+ post_title = data.get("postTitle", "")
|
|
|
+ # 使用帖子标题,如果太长则截断
|
|
|
+ if post_title:
|
|
|
+ tab_name = post_title[:15] + "..." if len(post_title) > 15 else post_title
|
|
|
+ else:
|
|
|
+ tab_name = f"帖子 {i+1}"
|
|
|
+ active_class = "active" if i == 0 else ""
|
|
|
+ tabs_html += f'<div class="tab {active_class}" data-index="{i}">{tab_name}</div>\n'
|
|
|
+
|
|
|
+ # 生成HTML
|
|
|
+ html_content = HTML_TEMPLATE.format(
|
|
|
+ tabs_html=tabs_html,
|
|
|
+ all_graph_data=json.dumps(all_graph_data, ensure_ascii=False),
|
|
|
+ persona_tree_data=json.dumps(persona_tree_data, ensure_ascii=False)
|
|
|
+ )
|
|
|
+
|
|
|
+ with open(output_file, "w", encoding="utf-8") as f:
|
|
|
+ f.write(html_content)
|
|
|
+
|
|
|
+
|
|
|
+def main():
|
|
|
+ # 使用路径配置
|
|
|
+ config = PathConfig()
|
|
|
+
|
|
|
+ print(f"账号: {config.account_name}")
|
|
|
+ print(f"输出版本: {config.output_version}")
|
|
|
+ print()
|
|
|
+
|
|
|
+ # 输入目录
|
|
|
+ match_graph_dir = config.intermediate_dir / "match_graph"
|
|
|
+
|
|
|
+ # 输出文件
|
|
|
+ output_file = config.intermediate_dir / "match_graph.html"
|
|
|
+
|
|
|
+ print(f"输入目录: {match_graph_dir}")
|
|
|
+ print(f"输出文件: {output_file}")
|
|
|
+ print()
|
|
|
+
|
|
|
+ # 读取人设树中间数据
|
|
|
+ persona_tree_file = config.intermediate_dir / "persona_tree.json"
|
|
|
+ persona_tree_data = {"nodes": [], "edges": []}
|
|
|
+
|
|
|
+ if persona_tree_file.exists():
|
|
|
+ print(f"读取人设树数据: {persona_tree_file.name}")
|
|
|
+ with open(persona_tree_file, "r", encoding="utf-8") as f:
|
|
|
+ tree_data = json.load(f)
|
|
|
+ persona_tree_data["nodes"] = tree_data.get("nodes", [])
|
|
|
+ persona_tree_data["edges"] = tree_data.get("edges", [])
|
|
|
+ category_count = len([n for n in persona_tree_data["nodes"] if n.get("节点类型") == "分类"])
|
|
|
+ tag_count = len([n for n in persona_tree_data["nodes"] if n.get("节点类型") == "标签"])
|
|
|
+ print(f" 分类节点: {category_count}, 标签节点: {tag_count}")
|
|
|
+ print(f" 边数: {len(persona_tree_data['edges'])}")
|
|
|
+
|
|
|
+ print()
|
|
|
+
|
|
|
+ # 读取所有匹配图谱文件
|
|
|
+ graph_files = sorted(match_graph_dir.glob("*_match_graph.json"))
|
|
|
+ print(f"找到 {len(graph_files)} 个匹配图谱文件")
|
|
|
+
|
|
|
+ all_graph_data = []
|
|
|
+ for i, graph_file in enumerate(graph_files, 1):
|
|
|
+ print(f" [{i}/{len(graph_files)}] 读取: {graph_file.name}")
|
|
|
+
|
|
|
+ with open(graph_file, "r", encoding="utf-8") as f:
|
|
|
+ match_graph_data = json.load(f)
|
|
|
+
|
|
|
+ # 提取需要的数据
|
|
|
+ graph_data = {
|
|
|
+ "postId": match_graph_data["说明"]["帖子ID"],
|
|
|
+ "postTitle": match_graph_data["说明"].get("帖子标题", ""),
|
|
|
+ "stats": match_graph_data["说明"]["统计"],
|
|
|
+ "nodes": match_graph_data["节点列表"],
|
|
|
+ "edges": match_graph_data["边列表"]
|
|
|
+ }
|
|
|
+ all_graph_data.append(graph_data)
|
|
|
+
|
|
|
+ # 生成HTML
|
|
|
+ print("\n生成HTML文件...")
|
|
|
+ generate_combined_html(all_graph_data, persona_tree_data, output_file)
|
|
|
+
|
|
|
+ print("\n" + "="*60)
|
|
|
+ print("处理完成!")
|
|
|
+ print(f"输出文件: {output_file}")
|
|
|
+
|
|
|
+
|
|
|
+if __name__ == "__main__":
|
|
|
+ main()
|