企业官网建设流程全解析

自定义社交网络可视化实战：用 Vue.js 与 D3 构建你的专属网络图（Data Science for Beginners 课程作业）

【免费下载链接】Data-Science-For-Beginners10 Weeks, 20 Lessons, Data Science for All!项目地址: https://gitcode.com/GitHub_Trending/da/Data-Science-For-Beginners

导读

本篇文章对应 Data Science for Beginners 第 13 课「Making Meaningful Visualizations」（制作有意义的可视化）的课后作业：在仓库提供的「Dangerous Liaisons（危险关系）」社交网络可视化示例代码基础上，用你自己真实的社交互动数据（社交媒体使用记录、家族成员关系等）模拟数据，构建一个独一无二、可交互的社交网络 Web 应用。读完本文你将掌握：D3 网络图在 Vue.js 中的接入方式、createLinks()链接生成逻辑的逐行原理、节点/连线/布局参数的自定义方法，以及如何将工程部署为静态 Web 应用并通过评分标准自检。

作业目标：构建你自己的自定义可视化

原作业指令（translations/en/3-Data-Visualization/13-meaningful-visualizations/assignment.md）要求如下：

使用本项目提供的代码示例，通过模拟你自己的社交互动数据来创建一个社交网络。你可以绘制自己的社交媒体使用情况，也可以设计一幅家族成员关系图。构建一个吸引人的 Web 应用，展示一个独特的社交网络可视化。

拆解下来，这项作业包含三个核心环节：

1. 吃透示例工程：理解「危险关系」项目如何把一部小说中的信件往来转化为网络图；
2. 替换数据源：把信件数据换成你自己设计/模拟的社交互动数据，字段结构保持一致；
3. 交付完整项目：代码可正常运行，并配有一份解释清晰的 README（评估标准中明确要求）。

该作业是第 13 课教学内容的延伸。课程正文（3-Data-Visualization/13-meaningful-visualizations/README.md）系统讲解了图表类型选择、避免欺骗性图表、颜色运用与可读性设计，最终落到「用 D3 在 Vue.js 应用中绘制动画社交网络」这个动手项目上——本作业正是让你在示例项目之上做二次创作。

环境准备：运行示例工程的先决条件

示例工程位于 starter 目录，其 README.md 明确要求本机已安装NPM 与 Node.js，且 Node 版本 >= 20.0.0（该约束同时写入 package.json 的engines字段）。

依次执行以下命令完成安装、运行与构建：

# 1. 安装项目依赖（会拉取 vue、vue-d3-network、@vue/cli-service 等） npm install # 2. 启动开发服务器，支持热重载（hot-reload） npm run serve # 3. 编译并压缩生产构建产物（用于部署静态站点） npm run build # 4. 代码检查与修复 npm run lint

依赖清单（来自 package.json）：

• vue：^3.5.16（应用框架）
• vue-d3-network：0.1.28（基于 Vue.js 与 D3 的网络可视化库，本作业核心依赖）
• core-js：^3.6.5
• 开发依赖：@vue/cli-plugin-babel、@vue/cli-plugin-eslint、@vue/cli-service（均为~5.0.8）、eslint、eslint-plugin-vue、babel-eslint、vue-template-compiler等

启动后，npm run serve会在本地起一个开发服务器，浏览器打开后即可看到网络图；你可以直接拖拽节点，把数据在屏幕上打乱重排——这正是vue-d3-network库自带的力导向交互能力。

示例工程结构拆解

starter/ ├── public/ │ ├── favicon.ico │ └── index.html # 单页应用外壳 ├── src/ │ ├── assets/ │ │ └── letters.json # 小说全部信件的结构化数据（1261 行 JSON） │ ├── components/ │ │ └── Nodes.vue # 核心组件：负责把信件数据渲染成网络图 │ ├── App.vue # 根组件，仅挂载 <Nodes /> │ └── main.js # 经典 Vue 入口：new Vue({ render: h => h(App) }).$mount("#app") ├── babel.config.js └── package.json

• App.vue 结构极简：模板里只有一个<Nodes />，全部可视化逻辑都收敛在 Nodes.vue 组件中。
• letters.json 是《危险关系》（Les Liaisons Dangereuses）这部 1782 年书信体小说中所有信件的结构化数据。每条记录形如：

{ "letter_num": 1, "from": "Cécile de Volanges", "to": "Sophie Carnay", "date": "8/3/17**", "location": "Ursulines" }

from表示写信人，to表示收信人，date为写信日期，location为写信地点。这个字段结构就是你自定义数据时需要严格对齐的模板。

核心实现：补全 createLinks() 生成网络连线

Nodes.vue 的<script>中预置了一个待补全的骨架：createLinks(characters)方法内部是空的，注释写着//complete this code，links数组也只有一行注释掉的示例{ sid: 1, tid: 2 }。这正是本次作业的核心编码任务。

课程给出的完整实现如下（来自 课程 README 的 Project 章节）：

//loop through letters let f = 0; let t = 0; for (var i = 0; i < letters.length; i++) { for (var j = 0; j < characters.length; j++) { if (characters[j] == letters[i].from) { f = j; } if (characters[j] == letters[i].to) { t = j; } } this.links.push({ sid: f, tid: t }); }

逐行理解这段逻辑：

1. 双重循环：外层遍历letters（全部信件），内层遍历characters（字符/人物数组）；
2. 姓名 → 索引映射：当人物名与某封信的from相等时，记录写信人的索引f；与to相等时，记录收信人的索引t。这样就把「字符串姓名」转换成了网络图库要求的数字节点 ID；
3. 构造连线：为每封信push一条{ sid: f, tid: t }——sid为源节点（写信人），tid为目标节点（收信人），这正是vue-d3-network库消费连线的标准格式。

补全后，组件在created()生命周期钩子中依次完成三件事（见 Nodes.vue 第 57-86 行）：

• 定义 15 位核心人物数组（如 Chevalier Danceny、Marquise de Merteuil、Vicomte de Valmont 等）；
• 调用this.createLinks(characters)生成连线；
• 为每个角色push一个节点对象：

this.nodes.push({ id: j, name: characters[j], _size: this.getCount(characters[j]) + 20, _color: "#" + Math.floor(Math.random() * 16777215).toString(16), });

其中getCount(name)统计的是收到该人物的信件数量（letters[i].to === name时计数加一），_size用收信数 + 20作为节点半径的基准——收到信越多，节点越大，从而一眼看出小说叙事中的「关键人物」。_color则随机生成十六进制颜色。

模板层通过vue-d3-network组件完成渲染：

<d3-network :net-nodes="nodes" :net-links="links" :options="options" />

布局与样式参数：让网络图可读、可交互

Nodes.vue 的options计算属性定义了可视化布局的核心参数，全部来自vue-d3-network库的配置项：

配套的<style>块还定义了节点与连线的交互反馈：选中节点描边为金色（#caa455）、悬停时节点与连线高亮为黄色并加粗到 5px、连线默认半透明绿色（rgba(18, 120, 98, 0.3)）等，保证网络图既清晰又生动。

提示：在自定义你的网络图时，force、size、nodeLabels、canvas这几个参数最值得调整——节点越多，通常需要越大的画布和经过调优的引力强度，否则图形会拥挤或散乱。

作业核心：设计你自己的社交网络数据

理解了示例的运行机制后，剩下的就是把数据「换血」。作业明确给出了两个可选的创意方向，你也可以自由发挥：

• 绘制你的社交媒体使用情况：例如把「发帖人 / 提及对象 / 回复对象」映射成from/to，节点就是你的社交账号与好友；
• 设计家族成员关系图：例如把「发送方 / 接收方」换成「父母 / 子女」「长辈 / 晚辈」，节点是每位家族成员。

无论选哪种题材，都需要产出两个数据件：

1. 关系数据（对应letters.json的角色）：每行一条互动记录，字段对齐from/to，可保留date（时间）、location（地点）等附加维度备用。示例：{"from": "Alice", "to": "Bob", "date": "2026-01-05"}；
2. 人物/实体列表（对应Nodes.vue中的characters数组）：把createLinks()里写死的小说人物数组替换成你自己的人物清单。注意：清单中的姓名必须与关系数据中的from/to字符串完全一致，否则双重循环的相等判断会失配，连线将无法生成。

数据规模上，示例用了 15 个角色与一百多封信件（letters.json 共 1261 行）。你的自定义数据集可以更小（如 5-10 个节点），但建议至少让每个节点都有一条连线，否则网络图的「关系」语义会不明显。如果你想强调某个维度，还可以仿照_size的算法，把节点大小改为「发送数量」「互动总次数」等任意度量。

参考实现与提交检查

仓库在 solution 目录 提供了完成版项目（目录结构与 starter 完全一致，Nodes.vue中的createLinks()已补全），写作业遇到卡点时可以对照参考。

原作业的评分标准（Rubric）三档如下，提交前请逐一自检：

对照标准可以总结出两条硬性要求：

• 代码必须能跑：npm install && npm run serve无报错，网络图正常渲染且可交互拖拽；
• 文档必须齐全：README 应说明项目是什么、数据从哪来、如何安装运行、可视化表达了什么。

关于部署：由于这是一个纯前端的 Vue CLI 工程，npm run build生成的静态产物可以部署到任意静态网站托管服务上，作为在线展示的成品。

让可视化「有意义」：把课程原则融入你的作品

作为第 13 课「Making Meaningful Visualizations」的作业，作品不应只是「能跑」，还应体现课程反复强调的设计原则（详见 课程 README）：

• 颜色即含义：示例用随机色Math.random()生成节点颜色，纯粹是占位。自定义作品时建议用语义化配色（如红色表权力、蓝色表信任、绿色表生态/好运），并考虑色盲用户的可访问性；
• 避免欺骗性呈现：不要通过反转坐标轴、截断刻度、乱序日期等手段制造误导性结论，节点大小、连线粗细必须如实反映数据量；
• 可读性优先：标签、图例、悬浮提示（tooltip）能让网络图的信息被快速理解，节点较多时合理增大画布、调优force。

完成以上全部环节，你就拥有了一个真正属于自己、可部署、可讲解的定制化社交网络可视化作品——这正是数据科学中最重要的一项基础能力：把原始数据转化为能回答问题的有意义可视化。

【免费下载链接】Data-Science-For-Beginners10 Weeks, 20 Lessons, Data Science for All!项目地址: https://gitcode.com/GitHub_Trending/da/Data-Science-For-Beginners