基于DeepSeek R1大模型-快速构建某一个核心领域概念的可视化知识图谱
基于DeepSeek R1大模型-快速构建某一个核心领域概念的可视化知识图谱
人月聊IT
发布于 2025-06-24 20:49:22
发布于 2025-06-24 20:49:22
Hello，大家好，我是人月聊IT。今天接着聊知识图谱的构建话题。在前面我专门分析过一篇文章，就是基于腾讯ima知识库我个人的历史知识文章，快速构建某一个我关注的核心专业方向，类似思维框架，云原生，企业架构等的知识图谱。整个构建过程实际我将其分解为了两个关键步骤。
其一是先知识库问答获取到完整的知识图谱需要的知识三元组。其二是再使用类似Neo4j等知识图谱绘制工具来构建知识图谱
具体参考历史文章：
今天我要讲的是借助DeepSeek R1大模型来直接通过创建 html+svg网页的方式来直接构建某一个核心主题概念的知识图谱。
首先我先反思下我原来基于大模型能力经常做的事情，就是快速的基于某一个核心概念构建这个概念下的思维导图Markdown文件，然后再通过思维导图工具将其转换为可视化思维导图。
类似我当时借助AI很简单的即可实现微服务架构知识结构思维导图：
但是大家注意，这里面的关键问题在哪里？
这个我前面谈个人知识管理，知识体系结构搭建的文章一再强调。知识体系结构不应该是一个简单的单一维度树状展开结构。知识结构更加应该是一个矩阵式或多维的知识结构或知识网络，类似我们经常说的知识图谱。
简单来说知识网络=知识树+知识点之间的关联。
这样的知识网络起到的关键作用就是能够很好的表达出知识点之间的关系。实际这种关系本身还包括了简单的关联关系，包含和从属关系，因果关系，前后依赖关系等。有了这种知识关联结构，往往更加方面我们指定熟悉某一个新领域的学习路线规划，包括知识之间的融会贯通。
今天我在知乎看到一个问题，就是希望了解哲学包括了哪些概念？这些概念之间究竟有什么关系？
当我们看到这个问题的时候一下又让我想到了知识图谱和知识网络结构，那么是否可以通过AI用SVG绘图的方式来快速的构建这种知识网络结构呢？
想到这里后，按我老思路我仍然先用Claude4.0进行了尝试，原因是原来我在使用DeepSeek和Claude两个AI工具的时候，Claude在SVG图绘制上面具有明显的优势，因此基于哲学这个问题，我给出提示语如下：
请列出西方哲学里面的核心概念，这些概念类似存在，认识，逻辑，归纳，演绎，方法论，物质，意识，本体，思考，辩证，感性，理性，形而上学，伦理等等。同时给出这些核心概念的简单解释，同时给出这些核心概念之间相互的关系，这些关系包括了包含关系，从属关系，依赖关系，因果关系，相互作用关系等。我希望将这些核心概念形成一个类似知识图谱的知识关系图，同时用svg绘图的方式给出源代码给我。这个知识关系图体现了知识本身的分层（类似一个概念下包含子概念等），同时体现了核心知识点之间的关联和依赖关系。
基于这个提示语，Claude给我输出内容规划如下：
图片
当我看到这个图的时候，第一眼感觉基本实现了我的需求，但是整体布局展示，逻辑关系不够完美。
大家都知识我对AI的尝试一遍都是同一件事一定会尝试多个不同的工具进行分析比较，找到各个工具各自擅长的内容。因此我又用同样的提示词采用DeepSeek R1模型进行了第二次尝试。
可以看下DeepSeek的概念和内容理解输出如下：
一、本体论核心概念
- 存在 (Being)
- 指事物最根本的实在性，探究"何物存在"及"存在的本质"。
- 本体 (Substance)
- 独立存在的实体，是属性的承载者（如亚里士多德的"第一本体"）。
- 物质 (Matter)
- 客观实在的物理基础，与"意识"相对（唯物论核心）。
- 意识 (Consciousness)
- 主观体验与认知能力（唯心论认为意识先于物质）。
- 形而上学 (Metaphysics)
- 研究超越经验的终极实在，包含存在、本体、宇宙本质等。
关系：
- 形而上学是容纳存在、本体、物质、意识的总框架。
- 物质与意识构成哲学基本问题（一元论/二元论之争）。
- 本体是解释存在的具体载体（如笛卡尔的"心灵与物体"）。
二、认识论核心概念
- 认识 (Epistemology)
- 研究知识的来源、限度和确定性。
- 感性 (Sensation/Perception)
- 通过感官获取经验（如休谟的"印象"）。
- 理性 (Reason)
- 通过逻辑推演获得知识（如笛卡尔的"天赋观念"）。
- 思考 (Thought)
- 意识的主动加工过程，涵盖感性与理性。
- 方法论 (Methodology)
- 系统化的认知路径（如笛卡尔的怀疑法）。
关系：
- 认识论以方法论为工具，探究感性与理性如何协作生成知识。
- 思考是感性与理性的整合过程。
- 理性主义（强调理性）vs 经验主义（强调感性）构成认识论主线。
三、逻辑与方法论核心概念
- 逻辑 (Logic)
- 推理的有效性规则（如三段论）。
- 演绎 (Deduction)
- 从一般前提推出个别结论（必然性推理）。
- 归纳 (Induction)
- 从个别观察推出普遍结论（或然性推理）。
- 辩证 (Dialectic)
- 通过矛盾对立达成真理（黑格尔的"正-反-合"）。
关系：
- 逻辑是演绎与归纳的基础规则。
- 演绎为形而上学提供确定性（如斯宾诺莎的几何学方法），归纳支撑科学实证（如培根）。
- 辩证是动态逻辑，解决概念矛盾（如马克思的唯物辩证法）。
四、价值论核心概念
- 伦理 (Ethics)
- 研究道德价值与行为规范（如康德的"绝对命令"）。
- 价值 (Value)
- 事物的重要性判断（道德、审美等）。
关系：
- 伦理是价值在道德领域的具体化。
- 价值论依赖形而上学（何为善？）和认识论（如何认识善？）。
五、概念间关系总表
关系类型 | 示例 |
|---|---|
层级包含 | 形而上学 ⊃ 存在论/本体论；认识论 ⊃ 感性与理性 |
对立统一 | 物质↔意识（本体论）；感性↔理性（认识论）；演绎↔归纳（方法论） |
依赖关系 | 方法论依赖逻辑；伦理依赖价值论；认识论依赖形而上学预设 |
因果/推动 | 逻辑危机推动分析哲学（如罗素）；认识论危机催生现象学（如胡塞尔） |
工具性支持 | 逻辑支撑形而上学体系；辩证法为历史哲学提供方法论 |
好了到这里没有完，最终输出的SVG知识图谱如下：
图片
注意这是一个完整的网页，中间是知识图谱的可视化，而且整个网页提供了知识图谱说明，还提供了层级展示，辐射展示，力导向图多种展示方式可以选择，中间部分放大图如下：
图片
这个输出说实话惊讶到我了，我还没有做进一步的提示词精细化。DeepSeek的输出结果明显好于Claude。而且这个知识网络图可以更加方面我们在切入一个新领域的时候，快速的沟通知识体系网络，并指定相应的学习计划。
这个本质就是对传统思维导图方式构建知识体系结构的一个升级。我们需要的不是简单的知识树，而是需要的知识依赖关系，知识关联网络，这个才是我们横向打通各个知识点的关键。
这个打通的本质是什么？
图片
我们可以回顾下我前面专门谈到过的知识组装这篇文章。任何一个专业领域往往都是问题和场景，场景下面是知识，知识下面是概念，概念下面是逻辑。也就是我要熟悉一个新领域，核心就是理解关键概念，包括概念和概念之间的关系。那么这些可复用的知识点就可以快速的组合形成我们对核心领域知识的全局了解，这个才是我们学习的本质。
为了尝试这个方法的有效性。
我接着又用云原生这个核心知识域进行了验证，输出知识图谱如下：
图片
本知识图谱展示了云原生技术体系的核心概念及其相互关系。图中包含四个主要层级：
- 基础设施层（蓝色）：容器化、不可变基础设施等基础技术
- 编排管理层（绿色）：Kubernetes、服务网格等编排技术
- 应用开发层（紫色）：微服务、Serverless等应用架构
- 贯穿体系（橙色）：DevOps、可观测性等支撑体系
接着在用企业架构做验证，提示语我做了额外要求如下：
好的，非常好。我希望你也同样的方式，帮我输出企业架构这个概念的知识图谱，同样体现核心概念和概念间的相互关系，页面的设计和前面哲学，云原生的知识图谱输出类似。我需要你参考TOGAF企业架构知识体系的元模型作为核心概念和子概念来输出这个可视化知识图谱。
图片
本图谱严格遵循TOGAF 10企业元模型标准，包含：
- 通用实体层（橙色）：战略驱动要素
- 业务架构层（黄色）：业务能力与流程
- 数据架构层（紫色）：企业数据资产结构
- 应用架构层（绿色）：应用系统蓝图
- 技术架构层（蓝色）：技术基础设施
点击节点查看详细定义，拖动节点探索架构关系。关系类型说明：
- 绿色实线：包含关系（如业务架构包含业务流程）
- 蓝色虚线：依赖关系（如应用架构依赖数据架构）
- 黄色实线：影响关系（战略目标影响业务能力）
- 紫色实线：实现关系（技术组件实现应用服务）
最后我们给出哲学这个知识图片的完整源代码，你可以拷贝另外到本地扩展名为html的文件，然后浏览器打开看下效果。
<!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>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: linear-gradient(135deg, #1a2a6c, #2c3e50);
margin: 0;
padding: 20px;
color: #fff;
min-height: 100vh;
}
.container {
max-width: 1400px;
margin: 0 auto;
}
header {
text-align: center;
padding: 20px;
margin-bottom: 30px;
}
h1 {
font-size: 2.8rem;
margin-bottom: 10px;
text-shadow: 0 2px 4px rgba(0,0,0,0.3);
background: linear-gradient(to right, #3498db, #2ecc71);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.subtitle {
font-size: 1.2rem;
color: #bdc3c7;
max-width: 800px;
margin: 0 auto;
line-height: 1.6;
}
.content {
display: flex;
gap: 30px;
}
#philosophy-graph {
flex: 3;
background: rgba(0, 0, 0, 0.4);
border-radius: 15px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
padding: 20px;
height: 700px;
}
.info-panel {
flex: 1;
background: rgba(30, 40, 70, 0.8);
border-radius: 15px;
padding: 25px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}
.info-panel h2 {
color: #3498db;
border-bottom: 2px solid #3498db;
padding-bottom: 10px;
margin-top: 0;
}
.concept-info {
background: rgba(25, 35, 65, 0.7);
border-left: 4px solid #3498db;
padding: 15px;
margin-bottom: 20px;
border-radius: 0 8px 8px 0;
}
.legend {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 15px;
margin-top: 30px;
}
.legend-item {
display: flex;
align-items: center;
margin-bottom: 10px;
}
.legend-color {
width: 20px;
height: 20px;
margin-right: 10px;
border-radius: 4px;
}
.controls {
display: flex;
justify-content: center;
gap: 15px;
margin: 25px 0;
}
button {
background: #3498db;
color: white;
border: none;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
font-weight: 600;
transition: all 0.3s ease;
}
button:hover {
background: #2980b9;
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}
.node {
cursor: pointer;
transition: all 0.3s ease;
}
.node text {
font-weight: 600;
text-shadow: 0 1px 3px rgba(0,0,0,0.8);
}
.node:hover {
filter: brightness(1.2);
transform: scale(1.05);
}
.link {
stroke: #7f8c8d;
stroke-width: 2px;
stroke-opacity: 0.6;
}
.link.dependency {
stroke: #3498db;
stroke-dasharray: 5,5;
}
.link.containment {
stroke: #2ecc71;
stroke-width: 3px;
}
.link.influence {
stroke: #f1c40f;
}
.link.opposition {
stroke: #e74c3c;
stroke-dasharray: 8,4;
}
.tooltip {
position: absolute;
background: rgba(0, 0, 0, 0.85);
border: 1px solid #3498db;
border-radius: 8px;
padding: 15px;
color: white;
pointer-events: none;
max-width: 300px;
z-index: 10;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
}
.tooltip h3 {
color: #3498db;
margin-top: 0;
margin-bottom: 10px;
}
footer {
text-align: center;
margin-top: 30px;
color: #95a5a6;
font-size: 0.9rem;
}
</style>
</head>
<body>
<div class="container">
<header>
<h1>西方哲学核心概念知识图谱</h1>
<p class="subtitle">本图谱展示了西方哲学中的核心概念及其相互关系，包括层级结构、依赖关系、对立统一等。点击概念节点可查看详细信息，拖动可探索图谱结构。</p>
</header>
<div class="controls">
<button id="arrange-hierarchical">层级排列</button>
<button id="arrange-radial">辐射排列</button>
<button id="arrange-force">力导向排列</button>
<button id="reset-view">重置视图</button>
</div>
<div class="content">
<div id="philosophy-graph"></div>
<div class="info-panel">
<h2>哲学概念说明</h2>
<div id="concept-details">
<div class="concept-info">
<h3>知识图谱说明</h3>
<p>本知识图谱展示了西方哲学中的核心概念及其相互关系。图中包含四个主要领域：</p>
<ul>
<li><strong>形而上学</strong>（紫色）：研究存在的本质</li>
<li><strong>认识论</strong>（蓝色）：研究知识的本质</li>
<li><strong>逻辑与方法论</strong>（绿色）：研究推理与思维方法</li>
<li><strong>价值论</strong>（橙色）：研究价值与伦理</li>
</ul>
<p>点击节点查看详细说明，拖动可探索图谱结构。</p>
</div>
</div>
<h2>图例说明</h2>
<div class="legend">
<div class="legend-item">
<div class="legend-color" style="background-color: #9b59b6;"></div>
<span>形而上学领域</span>
</div>
<div class="legend-item">
<div class="legend-color" style="background-color: #3498db;"></div>
<span>认识论领域</span>
</div>
<div class="legend-item">
<div class="legend-color" style="background-color: #2ecc71;"></div>
<span>逻辑与方法论</span>
</div>
<div class="legend-item">
<div class="legend-color" style="background-color: #e67e22;"></div>
<span>价值论领域</span>
</div>
<div class="legend-item">
<div class="legend-color" style="background-color: #2ecc71;"></div>
<span>包含关系</span>
</div>
<div class="legend-item">
<div class="legend-color" style="background-color: #3498db;"></div>
<span>依赖关系</span>
</div>
<div class="legend-item">
<div class="legend-color" style="background-color: #f1c40f;"></div>
<span>影响关系</span>
</div>
<div class="legend-item">
<div class="legend-color" style="background-color: #e74c3c;"></div>
<span>对立关系</span>
</div>
</div>
</div>
</div>
<footer>
<p>西方哲学核心概念知识图谱 | 展示了形而上学、认识论、逻辑学与价值论的关系 | 基于D3.js构建</p>
</footer>
</div>
<div class="tooltip"></div>
<script>
// 哲学概念数据
const philosophyData = {
nodes: [
// 形而上学领域
{ id: "metaphysics", name: "形而上学", category: "metaphysics", description: "研究超越经验的终极实在，包含存在、本体、宇宙本质等", size: 40 },
{ id: "being", name: "存在", category: "metaphysics", description: "事物最根本的实在性，探究'何物存在'及'存在的本质'", size: 30 },
{ id: "substance", name: "本体", category: "metaphysics", description: "独立存在的实体，是属性的承载者（如亚里士多德的'第一本体'）", size: 28 },
{ id: "matter", name: "物质", category: "metaphysics", description: "客观实在的物理基础，与'意识'相对（唯物论核心）", size: 28 },
{ id: "consciousness", name: "意识", category: "metaphysics", description: "主观体验与认知能力（唯心论认为意识先于物质）", size: 28 },
// 认识论领域
{ id: "epistemology", name: "认识论", category: "epistemology", description: "研究知识的来源、限度和确证性", size: 40 },
{ id: "knowledge", name: "认识", category: "epistemology", description: "人类获取和理解世界的过程与结果", size: 30 },
{ id: "sensation", name: "感性", category: "epistemology", description: "通过感官获取经验（如休谟的'印象'）", size: 28 },
{ id: "reason", name: "理性", category: "epistemology", description: "通过逻辑推演获得知识（如笛卡尔的'天赋观念'）", size: 28 },
{ id: "thought", name: "思考", category: "epistemology", description: "意识的主动加工过程，涵盖感性与理性", size: 28 },
// 逻辑与方法论领域
{ id: "logic", name: "逻辑", category: "methodology", description: "推理的有效性规则（如三段论）", size: 40 },
{ id: "deduction", name: "演绎", category: "methodology", description: "从一般前提推出个别结论（必然性推理）", size: 28 },
{ id: "induction", name: "归纳", category: "methodology", description: "从个别观察推出普遍结论（或然性推理）", size: 28 },
{ id: "dialectic", name: "辩证", category: "methodology", description: "通过矛盾对立达成真理（黑格尔的'正-反-合'）", size: 28 },
{ id: "methodology", name: "方法论", category: "methodology", description: "系统化的认知路径（如笛卡尔的怀疑法）", size: 30 },
// 价值论领域
{ id: "axiology", name: "价值论", category: "axiology", description: "研究价值的本质与分类（道德、审美等）", size: 40 },
{ id: "ethics", name: "伦理", category: "axiology", description: "研究道德价值与行为规范（如康德的'绝对命令'）", size: 30 },
{ id: "value", name: "价值", category: "axiology", description: "事物的重要性判断（道德、审美等）", size: 28 }
],
links: [
// 包含关系（绿色实线）
{ source: "metaphysics", target: "being", type: "containment" },
{ source: "metaphysics", target: "substance", type: "containment" },
{ source: "metaphysics", target: "matter", type: "containment" },
{ source: "metaphysics", target: "consciousness", type: "containment" },
{ source: "epistemology", target: "knowledge", type: "containment" },
{ source: "epistemology", target: "sensation", type: "containment" },
{ source: "epistemology", target: "reason", type: "containment" },
{ source: "epistemology", target: "thought", type: "containment" },
{ source: "logic", target: "deduction", type: "containment" },
{ source: "logic", target: "induction", type: "containment" },
{ source: "logic", target: "dialectic", type: "containment" },
{ source: "methodology", target: "logic", type: "containment" },
{ source: "axiology", target: "ethics", type: "containment" },
{ source: "axiology", target: "value", type: "containment" },
// 依赖关系（蓝色虚线）
{ source: "epistemology", target: "metaphysics", type: "dependency", label: "依赖" },
{ source: "methodology", target: "logic", type: "dependency", label: "依赖" },
{ source: "thought", target: "sensation", type: "dependency", label: "依赖" },
{ source: "thought", target: "reason", type: "dependency", label: "依赖" },
{ source: "axiology", target: "epistemology", type: "dependency", label: "依赖" },
// 影响关系（黄色实线）
{ source: "metaphysics", target: "epistemology", type: "influence", label: "奠基" },
{ source: "logic", target: "epistemology", type: "influence", label: "支撑" },
{ source: "methodology", target: "epistemology", type: "influence", label: "提供工具" },
{ source: "dialectic", target: "thought", type: "influence", label: "方法" },
{ source: "epistemology", target: "axiology", type: "influence", label: "影响" },
// 对立关系（红色虚线）
{ source: "matter", target: "consciousness", type: "opposition", label: "对立统一" },
{ source: "sensation", target: "reason", type: "opposition", label: "对立统一" },
{ source: "deduction", target: "induction", type: "opposition", label: "互补" }
]
};
// 颜色映射
const colorScale = d3.scaleOrdinal()
.domain(["metaphysics", "epistemology", "methodology", "axiology"])
.range(["#9b59b6", "#3498db", "#2ecc71", "#e67e22"]);
// 创建SVG容器
const width = document.getElementById('philosophy-graph').clientWidth;
const height = document.getElementById('philosophy-graph').clientHeight;
const svg = d3.select("#philosophy-graph")
.append("svg")
.attr("width", width)
.attr("height", height);
// 创建力导向图
const simulation = d3.forceSimulation(philosophyData.nodes)
.force("link", d3.forceLink(philosophyData.links).id(d => d.id).distance(120).strength(0.8))
.force("charge", d3.forceManyBody().strength(-300))
.force("center", d3.forceCenter(width / 2, height / 2))
.force("collision", d3.forceCollide().radius(d => d.size + 5));
// 创建箭头标记
svg.append("defs").selectAll("marker")
.data(["dependency", "influence", "opposition"])
.enter().append("marker")
.attr("id", d => d)
.attr("viewBox", "0 -5 10 10")
.attr("refX", 25)
.attr("refY", 0)
.attr("markerWidth", 6)
.attr("markerHeight", 6)
.attr("orient", "auto")
.append("path")
.attr("d", "M0,-5L10,0L0,5")
.attr("fill", d => {
if (d === "dependency") return "#3498db";
if (d === "influence") return "#f1c40f";
return "#e74c3c";
});
// 创建连线
const link = svg.append("g")
.attr("class", "links")
.selectAll("line")
.data(philosophyData.links)
.enter()
.append("line")
.attr("class", d => `link ${d.type}`)
.attr("marker-end", d => d.type !== "containment" ? `url(#${d.type})` : null);
// 创建节点
const node = svg.append("g")
.attr("class", "nodes")
.selectAll("g")
.data(philosophyData.nodes)
.enter()
.append("g")
.attr("class", "node")
.call(d3.drag()
.on("start", dragstarted)
.on("drag", dragged)
.on("end", dragended));
// 节点圆圈
node.append("circle")
.attr("r", d => d.size)
.attr("fill", d => colorScale(d.category))
.attr("stroke", "#fff")
.attr("stroke-width", 2);
// 节点文本
node.append("text")
.attr("text-anchor", "middle")
.attr("dy", "0.35em")
.attr("fill", "white")
.attr("font-size", d => d.id === "metaphysics" || d.id === "epistemology" ||
d.id === "logic" || d.id === "axiology" ? "14px" : "12px")
.text(d => d.name);
// 连线标签
const linkLabels = svg.append("g")
.attr("class", "link-labels")
.selectAll("text")
.data(philosophyData.links.filter(d => d.label))
.enter()
.append("text")
.attr("class", "link-label")
.attr("font-size", "12px")
.attr("fill", d => {
if (d.type === "dependency") return "#3498db";
if (d.type === "influence") return "#f1c40f";
if (d.type === "opposition") return "#e74c3c";
return "#2ecc71";
})
.text(d => d.label);
// 工具提示
const tooltip = d3.select(".tooltip");
node.on("mouseover", function(event, d) {
tooltip.style("display", "block")
.html(`<h3>${d.name}</h3><p>${d.description}</p>`);
})
.on("mousemove", function(event) {
tooltip.style("left", (event.pageX + 10) + "px")
.style("top", (event.pageY - 20) + "px");
})
.on("mouseout", function() {
tooltip.style("display", "none");
})
.on("click", function(event, d) {
// 在信息面板显示详细信息
document.getElementById("concept-details").innerHTML = `
<div class="concept-info">
<h3>${d.name}</h3>
<p><strong>领域：</strong>${getCategoryName(d.category)}</p>
<p><strong>定义：</strong>${d.description}</p>
${getRelatedConcepts(d.id)}
</div>
`;
});
// 更新力导向图
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})`);
linkLabels.attr("x", d => (d.source.x + d.target.x) / 2)
.attr("y", d => (d.source.y + d.target.y) / 2);
});
// 拖拽函数
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 getCategoryName(category) {
const names = {
"metaphysics": "形而上学",
"epistemology": "认识论",
"methodology": "逻辑与方法论",
"axiology": "价值论"
};
return names[category] || category;
}
function getRelatedConcepts(conceptId) {
const relatedLinks = philosophyData.links.filter(
link => link.source.id === conceptId || link.target.id === conceptId
);
if (relatedLinks.length === 0) return "";
let html = "<p><strong>相关概念：</strong></p><ul>";
relatedLinks.forEach(link => {
const relatedConcept = link.source.id === conceptId ? link.target : link.source;
const relationType = link.type === "containment" ? "包含" :
link.type === "dependency" ? "依赖" :
link.type === "influence" ? "影响" : "对立";
const relationDesc = link.label ? ` (${link.label})` : "";
html += `<li>${relationType}关系${relationDesc}: ${relatedConcept.name}</li>`;
});
html += "</ul>";
return html;
}
// 布局控制
document.getElementById("arrange-hierarchical").addEventListener("click", function() {
arrangeHierarchical();
});
document.getElementById("arrange-radial").addEventListener("click", function() {
arrangeRadial();
});
document.getElementById("arrange-force").addEventListener("click", function() {
simulation.alpha(1).restart();
});
document.getElementById("reset-view").addEventListener("click", function() {
simulation.alpha(1).restart();
setTimeout(arrangeHierarchical, 100);
});
// 层级布局
function arrangeHierarchical() {
const centerX = width / 2;
const centerY = height / 2;
// 主要分支位置
const mainNodes = {
"metaphysics": { x: centerX - 250, y: centerY - 150 },
"epistemology": { x: centerX + 250, y: centerY - 150 },
"logic": { x: centerX - 250, y: centerY + 150 },
"methodology": { x: centerX - 250, y: centerY + 150 },
"axiology": { x: centerX + 250, y: centerY + 150 }
};
// 更新节点位置
philosophyData.nodes.forEach(node => {
if (mainNodes[node.id]) {
node.fx = mainNodes[node.id].x;
node.fy = mainNodes[node.id].y;
} else {
// 子节点围绕主节点
const parent = philosophyData.links.find(l =>
l.target.id === node.id && l.type === "containment"
)?.source;
if (parent && mainNodes[parent.id]) {
const angle = Math.random() * Math.PI * 2;
const radius = 120;
node.fx = mainNodes[parent.id].x + Math.cos(angle) * radius;
node.fy = mainNodes[parent.id].y + Math.sin(angle) * radius;
} else {
node.fx = centerX + (Math.random() - 0.5) * 200;
node.fy = centerY + (Math.random() - 0.5) * 200;
}
}
});
simulation.alpha(1).restart();
setTimeout(() => {
philosophyData.nodes.forEach(node => {
node.fx = null;
node.fy = null;
});
}, 1000);
}
// 辐射布局
function arrangeRadial() {
const centerX = width / 2;
const centerY = height / 2;
// 核心节点
const coreNodes = ["metaphysics", "epistemology", "logic", "axiology"];
// 更新节点位置
philosophyData.nodes.forEach(node => {
if (coreNodes.includes(node.id)) {
// 核心节点在中心圆上
const index = coreNodes.indexOf(node.id);
const angle = (index / coreNodes.length) * Math.PI * 2;
const radius = 100;
node.fx = centerX + Math.cos(angle) * radius;
node.fy = centerY + Math.sin(angle) * radius;
} else {
// 子节点围绕其父节点
const parentLink = philosophyData.links.find(l =>
l.target.id === node.id && l.type === "containment"
);
if (parentLink) {
const parent = philosophyData.nodes.find(n => n.id === parentLink.source.id);
const angle = Math.random() * Math.PI * 2;
const radius = 80;
node.fx = parent.x + Math.cos(angle) * radius;
node.fy = parent.y + Math.sin(angle) * radius;
} else {
node.fx = centerX + (Math.random() - 0.5) * 200;
node.fy = centerY + (Math.random() - 0.5) * 200;
}
}
});
simulation.alpha(1).restart();
setTimeout(() => {
philosophyData.nodes.forEach(node => {
node.fx = null;
node.fy = null;
});
}, 1000);
}
// 初始布局
arrangeHierarchical();
</script>
</body>
</html>今天的分享就到这里，希望对你在整理个人知识体系，切入新领域构建知识体系结构和知识图谱方面有所启发。
本文参与 腾讯云自媒体同步曝光计划，分享自微信公众号。
原始发表：2025-06-15，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号