Data-Science-For-Beginners 实战用 Vue.js 与 D3 构建《危险关系》书信社交网络可视化【免费下载链接】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 课“有意义的数据可视化”配套项目一个基于《危险关系》Les Liaisons Dangereuses小说书信数据构建的动态社交网络可视化 Web 应用。项目位于仓库的 solution 目录使用 Vue.js 3 与 vue-d3-network基于 D3.js实现运行后即可用鼠标拖拽节点、观察小说人物之间的书信往来关系。读完本文你将掌握该项目的环境配置、四组核心 NPM 命令、源码调用链从 main.js 到 Nodes.vue 的完整数据流以及如何基于letters.json自定义属于自己的社交网络图。项目源码本仓库 solution 目录英文原版文档见 英文 README。一、项目背景用一部长篇小说做网络图《危险关系》是法国作家 Choderlos de Laclos 于 1782 年创作的书信体小说全书由多封人物之间往来的信件组成围绕 18 世纪末法国贵族 Valmont 子爵与 Merteuil 侯爵夫人之间充满算计与复仇的社交博弈展开。从数据科学视角看这部小说天然就是一份关系型数据集每一封信都有明确的发信人from与收信人to正是构建节点—连边node-link网络图的标准输入。本课程项目详见 课程 README的设计思路是通过可视化这些书信往来让读者直观地发现叙事中的关键人物kingpins——谁收到的信最多、谁处于社交网络的中心。这演示了有意义的数据可视化的一个核心观点选对图表类型此处为网络关系图才能回答你真正想问的问题谁是小说的社交枢纽。二、环境要求与项目结构2.1 运行前提Node.js 与 NPM启动项目前必须确认本机已安装NPM 与 Node.js ≥ 20.0.0。该版本要求写在项目 package.json 的engines字段中engines: { node: 20.0.0 }可通过node -v与npm -v验证版本满足条件后再执行安装命令。2.2 solution 目录结构完整项目英文原版位于仓库 3-Data-Visualization/13-meaningful-visualizations/solution 下关键文件如下路径作用package.json项目清单依赖、脚本命令、Node 版本约束src/main.js应用入口挂载根组件src/App.vue根组件渲染 Nodes 组件src/components/Nodes.vue核心组件解析书信数据、生成节点与连边、配置 D3 网络src/assets/letters.json小说全部书信数据from / to / date / locationbabel.config.jsBabel 编译配置public/index.htmlHTML 宿主页三、四组核心命令安装、开发、构建与检查原文档给出的命令是本项目实操的骨架以下逐一展开说明其含义与适用场景。3.1 项目安装npm install根据 package.json 中的依赖声明该命令会安装运行时依赖vue^3.5.19、vue-d3-network0.1.28负责把节点/连边渲染成可拖拽的 D3 网络图、core-js^3.6.5开发依赖vue/cli-service~5.0.8、vue/cli-plugin-babel、vue/cli-plugin-eslint、babel-eslint、eslint^9.34.0、eslint-plugin-vue^10.4.0等同时还会依据overrides字段对qs6.14.2、braces3.0.3、serialize-javascript7.0.5做版本覆盖以修正间接依赖的已知问题。3.2 开发模式编译并热重载npm run serve该命令对应 package.json 中的vue-cli-service serve会启动本地开发服务器并监听文件变更自动热重载。浏览器打开提示的本地地址即可看到网络图运行时可按住节点在画布上拖拽图形会实时重新布局这正是 vue-d3-network 的力导向布局特性。3.3 生产构建编译并压缩npm run build对应vue-cli-service build将源码编译、压缩并输出到dist/目录产物可直接托管为静态站点。课程作业assignment.md也提示可将完成的应用部署为静态 Web 应用此时npm run build是必经步骤。3.4 代码检查lint 并自动修复npm run lint对应vue-cli-service lint按 package.json 中的eslintConfigplugin:vue/essentialeslint:recommended解析器为babel-eslint对源码做静态检查并尽可能自动修复格式与规范问题。说明原文档末尾附有 Vue CLI 官方配置参考的外部链接。由于本项目为 Vue CLI 5 工程如需自定义构建配置如 devServer 端口、publicPath可在项目根目录新增vue.config.js并按 Vue CLI 约定配置本文仅介绍仓库内已确认的信息不展开外部文档。四、源码级解析从入口到网络图的数据流理解项目最好的方式是跟随调用链读一遍源码。整个应用只有三层非常精简。4.1 入口 src/main.jsimport Vue from vue; import App from ./App.vue; Vue.config.productionTip false; new Vue({ render: h h(App) }).$mount(#app);创建一个 Vue 根实例把App组件渲染并挂载到 public/index.html 中 id 为#app的 DOM 节点上。4.2 根组件 src/App.vuetemplate div idapp Nodes / /div /templateApp 只做一件事引入并渲染核心组件Nodes。4.3 核心组件 src/components/Nodes.vue这是整个可视化的中枢模板中直接使用网络图库组件template div classhello d3-network :net-nodesnodes :net-linkslinks :optionsoptions / /div /templatevue-d3-network接收三个关键 propnet-nodes节点数组、net-links连边数组、options渲染配置。4.3.1 书信数据 letters.json数据源每一条记录对应一封信包含letter_num信件序号、from发信人、to收信人、date日期、location地点例如{ letter_num: 1, from: Cécile de Volanges, to: Sophie Carnay, date: 8/3/17**, location: Ursulines }4.3.2 生成连边createLinks()组件在created()生命周期中调用createLinks(characters)将书信数据转换为网络图库可消费的links数组。核心逻辑是双重循环外层遍历每一封信内层遍历人物名单找到from与to对应的人物索引再 push 一条{ sid, tid }连边sid 起点索引tid 终点索引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 }); } }4.3.3 生成节点getCount() 与节点尺寸每个节点代表一个人物其_size节点半径由getCount()计算——统计该人物作为收信人出现的次数再 20 作为基础尺寸收到的信越多节点越大getCount(name) { var count 0; for (var i 0; i letters.length; i) { if (letters[i].to name) { count; } } return count; }节点还包含随机颜色_colorMath.floor(Math.random() * 16777215)生成的十六进制色值这正是用颜色与大小承载数据含义的体现——与课程第 13 课关于色彩语义的讨论一脉相承。created()中的人物名单共 15 项包括 Valmont 子爵、Merteuil 侯爵夫人、Cécile Volanges、Présidente de Tourvel 等小说角色let characters [ Chevalier Danceny, Marquise de Merteuil, Cécile Volanges, Présidente de Tourvel, Azolan, chasseur, Madame de Rosemonde, Madame de Volanges, Vicomte de Valmont, Père Anselme, ..., M. Bertrand, Anonyme, Sophie Carnay, Maréchale de ***, Le Comte de Gercourt, ];4.3.4 渲染选项optionsoptions() { return { force: 3000, // 力导向布局强度 size: { w: 600, h: 600 }, offset: { x: 0, y: 0 }, nodeLabels: true, // 显示节点标签 linkLabels: true, // 显示连边标签 canvas: this.canvas, // 是否使用 canvas 渲染 }; }其中force: 3000控制节点间的斥力大小数值越大节点分布越分散canvas: false表示使用 SVG 渲染组件中另有nodeSize: 10与canvas两个可切换数据项。4.4 样式与交互Nodes.vue 的style段定义了网络图的视觉细节节点默认填充色#dcfaf3选中态描边#caa455固定态描边紫色连边默认半透明绿色hover 时描边变粗并转为金色#app采用全屏绝对定位布局。这些样式让可视化在可读性标签、颜色对比、hover 反馈上符合课程Styling your charts for readability一节的要求。五、运行与观察拖拽、探索与自定义按第三节顺序依次执行npm install→npm run serve打开开发服务器地址即可看到《危险关系》书信社交网络图用鼠标拖拽任意节点力导向引擎会带动整张网络重新排布方便从不同角度观察人物簇通过节点大小快速定位叙事枢纽——节点越大说明作为收信人的次数越多即收到信件最多的人物。六、延伸练习构建你自己的社交网络可视化课程配套作业assignment.md要求将本项目改造成属于自己的社交网络图可以映射你的社交媒体使用数据或绘制一张家庭成员关系图。操作要点将 src/assets/letters.json 替换为你的数据保持from/to字段结构即可修改 Nodes.vue 中的characters名单与节点/连边生成逻辑用npm run build构建产物并尝试部署为静态 Web 应用为项目补充带注释的 README说明数据来源与可视化思路。评分标准Rubric关注三点代码能否正常运行最好可部署为静态应用、README 是否标注清晰、文档与运行质量是否兼备。七、小结本文从命令到源码完整梳理了 Data-Science-For-Beginners 第 13 课的网络可视化项目npm install/npm run serve/npm run build/npm run lint四组命令构成了标准 Vue CLI 工作流main.js → App.vue → Nodes.vue的调用链演示了如何用三层代码把 1200 余条书信记录渲染成可拖拽的社交网络图createLinks()与getCount()分别回答了谁和谁通信与谁收到的信最多两个问题正是选对图表类型回答正确问题这一数据可视化核心理念的最佳注脚。【免费下载链接】Data-Science-For-Beginners10 Weeks, 20 Lessons, Data Science for All!项目地址: https://gitcode.com/GitHub_Trending/da/Data-Science-For-Beginners创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考