Dangerous Liaisons 数据可视化实战：用 Vue 3 与 vue-d3-network 搭建小说社交网络

Dangerous Liaisons 数据可视化实战用 Vue 3 与 vue-d3-network 搭建小说社交网络【免费下载链接】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危险关系**展开讲解如何基于 Vue 3 与 vue-d3-network 库把 18 世纪书信体小说《Les Liaisons Dangereuses》中 175 封书信的收发关系构建为一张可交互、可拖拽的动画社交网络图。读完本文你将掌握该 starter 项目的完整搭建流程npm install、npm run serve、npm run build、npm run lint、Node 版本要求、项目目录结构、核心组件 Nodes.vue 的实现原理以及如何补全createLinks()方法让可视化真正跑起来。项目背景为什么用小说书信做网络可视化在数据科学课程体系中第 13 课的主题是创建有意义的数据可视化Making Meaningful Visualizations重点讨论如何选择合适的图表类型、避免误导性图表、正确使用颜色与样式以及探索动画与 3D 可视化方案。而《危险关系》这部 1782 年由 Choderlos de Laclos 创作的书信体小说天然就是一个极佳的关系数据集——小说以一系列信件展开每封信都有明确的from寄件人与to收件人字段恰好可以映射为网络图中的节点与连线。节点node小说中的出场人物如 Vicomte de Valmont、Marquise de Merteuil、Cécile Volanges 等连线link人物之间的书信往来sid表示寄件人在人物列表中的索引tid表示收件人的索引。通过这种可视化可以直观地看出谁是叙事网络中的核心人物hub。这也正是数据可视化课程想传递的理念选对可视化形式才能让数据自己说话。本项目的 starter 骨架位于 starter 目录完成版参考位于 solution 目录。两套代码结构完全一致区别仅在于Nodes.vue中createLinks()是否已被补全。环境准备Node.js 与 NPM 版本要求在开始之前请确保本机已安装 Node.js 与 NPM。根据 starter/package.json 中的engines字段声明engines: { node: 20.0.0 }本项目要求Node.js 版本不低于 20.0.0这是由项目使用的 Vue CLI 5.x 与相关构建工具链决定的。可以通过以下命令确认当前环境版本node -v npm -v如果版本过低请先升级 Node.js 到 20 或更高版本否则依赖安装或本地构建可能报错。项目结构解析运行前先理解 starter 的目录组织。打开 starter 目录其结构如下starter/ ├── public/ │ ├── favicon.ico │ └── index.html # Vue 应用挂载入口页 ├── src/ │ ├── assets/ │ │ └── letters.json # 小说全部书信数据from / to 字段 │ ├── components/ │ │ └── Nodes.vue # 网络可视化核心组件需要补全 createLinks │ ├── App.vue # 根组件仅渲染 Nodes / │ └── main.js # 应用入口 ├── babel.config.js ├── package.json # 依赖与脚本声明 └── package-lock.json各关键文件的职责如下letters.json书信数据源letters.json 是全项目的数据基石共 1261 行包含小说中全部书信记录每条记录结构如下{ letter_num: 1, from: Cécile de Volanges, to: Sophie Carnay, date: 8/3/17**, location: Ursulines }letter_num信件编号from寄件人姓名to收件人姓名date/location信件日期与地点部分记录缺省。from与to正是构建网络图连线所需的核心字段。App.vue根组件App.vue 非常精简只负责渲染唯一的子组件template div idapp Nodes / /div /template script import Nodes from ./components/Nodes; export default { name: App, components: { Nodes, }, }; /scriptNodes.vue网络可视化核心组件Nodes.vue 是本项目的灵魂。它引入vue-d3-network组件与letters.json数据模板部分只有一行template div classhello d3-network :net-nodesnodes :net-linkslinks :optionsoptions / /div /templated3-network接收三个关键 propprop含义数据来源net-nodes节点数组由created()生命周期钩子基于人物列表构建net-links连线数组需要补全createLinks()来构建options渲染配置computed 属性options()返回步骤一安装依赖npm install在 starter 目录下执行npm install该命令会根据 package.json 安装全部依赖。核心依赖如下运行依赖dependencies依赖版本作用vue^3.5.16前端框架Vue 3 组合式/选项式 APIvue-d3-network0.1.28基于 D3 的 Vue 网络图组件负责力导向布局与渲染core-js^3.6.5提供旧环境 Polyfill开发依赖devDependencies依赖版本作用vue/cli-service~5.0.8Vue CLI 5 的服务层支撑 serve / build 脚本vue/cli-plugin-babel~5.0.8Babel 编译插件vue/cli-plugin-eslint~5.0.8ESLint 集成插件eslint/eslint-plugin-vue9.x / 10.x代码规范检查vue-template-compiler^2.6.11模板编译器保留配置提示package.json 中还通过overrides字段固定了qs、braces、webpack-dev-server等传递依赖的安全版本安装时请保持网络畅通首次安装耗时较长属正常现象。步骤二开发模式运行npm run serve依赖安装完成后执行npm run serve对应脚本为serve: vue-cli-service servevue-cli-service serve会启动一个本地开发服务器默认http://localhost:8080具备以下能力热重载Hot Module Replacement修改Nodes.vue、App.vue等源码文件后浏览器自动刷新无需手动重启编译错误提示语法或模板错误会在终端与浏览器 overlay 中即时显示代理与调试支持完整继承 Vue CLI 5 的开发服务器能力。运行成功后浏览器打开http://localhost:8080即可看到小说人物网络图的雏形此时links为空数组只有节点散落分布。步骤三生产构建npm run build开发调试完成后可构建用于部署的静态产物npm run build对应脚本build: vue-cli-service build构建产物默认输出到dist/目录包含压缩混淆后的 JS/CSS 与静态资源可直接托管到任意静态 Web 服务器或对象存储上本课程的 assignment 也建议尝试将成品部署为静态 Web 应用。构建时 Vue CLI 会自动执行代码分割、文件指纹fingerprint等优化。步骤四代码检查与修复npm run lint保持代码风格统一运行npm run lint对应脚本lint: vue-cli-service lint该命令基于eslintConfig中声明的规则组合执行检查eslintConfig: { root: true, env: { node: true }, extends: [ plugin:vue/essential, eslint:recommended ], parserOptions: { parser: babel-eslint }, rules: {} }plugin:vue/essentialVue 官方推荐的必要级规则防止模板与组件书写中的常见错误eslint:recommendedESLint 内置推荐规则集。ESLint 会自动修复可自动修复的格式问题并提示其余需要手工处理的错误。核心实现补全 createLinks() 让网络图真正连接起来starter 版本的 Nodes.vue 中createLinks()是一个待完成的方法源码里只有一行注释methods: { createLinks(characters) { //complete this code }, ... }而created()生命周期钩子中已经预先定义好 15 个人物Vicomte de Valmont、Marquise de Merteuil、Cécile Volanges、Chevalier Danceny 等并在钩子内调用this.createLinks(characters)生成连线随后遍历人物列表构建节点created() { let characters [ Chevalier Danceny, Marquise de Merteuil, Cécile Volanges, ... ]; this.createLinks(characters); for (var j 0; j characters.length; j) { this.nodes.push({ id: j, name: characters[j], _size: this.getCount(characters[j]) 20, _color: # Math.floor(Math.random() * 16777215).toString(16), }); } }节点构建中有两个值得注意的细节_size节点大小 getCount(人物名) 20。其中getCount()统计letters中所有to name的信件数量即收信越多节点越大用来突出叙事核心人物_color为每个节点随机生成十六进制颜色让网络图更易区分不同人物。补全 createLinks 的嵌套循环代码根据课程主文档 13-meaningful-visualizations/README.md 给出的补全方案createLinks()应实现如下逻辑——双重循环遍历书信数据与人物列表把每封信的from/to映射为人物索引f/t并压入links数组createLinks(characters) { //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 }); } }其运行原理分三步外层循环逐条读取letters中的书信记录共 175 封内层循环把letters[i].from与letters[i].to分别匹配到characters人物列表的索引f与t将{ sid: f, tid: t }追加到this.linkssid是源节点 idtid是目标节点 idvue-d3-network正是依据这一结构绘制连线。完成后的参考实现可以直接对照 solution 版本的 Nodes.vue。补全后再次执行npm run serve即可看到人物之间的书信连线在网络图中展开并可通过鼠标拖拽节点调整布局——这正是一个典型的力导向图force-directed graph。可视化配置项深度解读Nodes.vue中的 computed 属性options()控制整个网络图的渲染行为computed: { options() { return { force: 3000, size: { w: 600, h: 600 }, offset: { x: 0, y: 0, }, nodeLabels: true, linkLabels: true, canvas: this.canvas, }; }, }各参数含义如下参数默认值/示例值作用force3000力导向布局的斥力强度值越大节点间间距越大size{ w: 600, h: 600 }画布宽高像素可依据页面布局调整offset{ x: 0, y: 0 }画布偏移量用于整体平移网络图nodeLabelstrue是否显示节点名称标签linkLabelstrue是否显示连线标签canvasfalse是否使用 Canvas 渲染data()中声明默认 false 走 SVG 渲染其中canvas: this.canvas与data()中的canvas: false对应切换为true后可使用 Canvas 模式渲染在节点数量庞大时性能更好。样式与可读性让可视化更有意义课程主文档强调不可读的图表就没有意义。为此Nodes.vue内置了一套针对交互与可读性优化的样式节点与连线的 hover 高亮鼠标悬停时描边变为金色rgba(250, 197, 65, 0.6)并加粗至 5px方便追踪某条关系选中与固定状态区分.node.selected金色描边与.node.pinned紫色描边分别标识选中与被固定的节点连线半透明设计stroke: rgba(18, 120, 98, 0.3)避免密集连线时视觉混乱标签定位优化.link-label使用translateY(-0.5em)与text-anchor: middle让连线标签居中于连线之上。.link:hover, .node:hover { stroke: rgba(250, 197, 65, 0.6); stroke-width: 5px; }这些细节呼应了课程中选择合适的可视化并保证可读性的核心理念。配置自定义与延伸学习Vue CLI 5 项目支持通过项目根目录的vue.config.js自定义构建配置如 devServer 端口、代理、publicPath 等。本 starter 未提供该文件采用全部默认配置如需调整可参考 Vue CLI 官方配置参考文档自行创建。若希望进一步深化可以参考课程主文档 13-meaningful-visualizations/README.md 中的图表选型对照表趋势→折线图、类别比较→柱状/饼图、关系→散点/折线/分面图、比例→饼图/甜甜圈/华夫图等以及避免误导性图表章节——本项目属于展示关系的典型场景配套作业 assignment.md将人物关系替换为你自己的社交数据如社交媒体使用记录或家庭关系图构建一个独特的社会网络可视化 Web 应用并尝试部署为静态站点。常见问题排查现象可能原因解决办法npm install报引擎错误Node 版本低于 20.0.0升级 Node.js 至 20 后重试npm run serve后页面只有节点没有连线createLinks()未补全links为空数组按上文补全嵌套循环逻辑构建产物部署后图片/接口 404publicPath 路径问题在vue.config.js中配置正确的publicPath节点过多时渲染卡顿SVG 渲染开销大将data()中canvas设为true切换 Canvas 渲染小结Dangerous Liaisons 项目是有意义的数据可视化课程中最具互动性的实战练习它把文学作品结构化为一组可计算的书信关系数据再用 Vue 3 vue-d3-network 在浏览器中渲染成可拖拽的力导向网络图。通过本文你已经掌握了从环境准备、npm install、npm run serve、npm run build、npm run lint的完整开发流程理解了letters.json的数据结构、Nodes.vue的节点/连线构建机制以及options各配置项对渲染效果的影响。接下来不妨对照 solution 版本 验证你的实现并尝试用同样的思路去可视化你自己的社交关系数据。【免费下载链接】Data-Science-For-Beginners10 Weeks, 20 Lessons, Data Science for All!项目地址: https://gitcode.com/GitHub_Trending/da/Data-Science-For-Beginners创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考