Data-Science-For-Beginners 实战：用 Vue.js 与 D3.js 构建 Dangerous Liaisons 动态社交网络可视化

Data-Science-For-Beginners 实战用 Vue.js 与 D3.js 构建 Dangerous Liaisons 动态社交网络可视化【免费下载链接】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.js 与vue-d3-network库把 18 世纪书信体小说《危险关系》中 1261 条信件数据转化为可交互、可拖拽的动画社交网络图。读完本文你将掌握该 Web 可视化项目的完整安装、运行与构建流程理解letters.json数据的解析方式并能独立完成Nodes.vue中createLinks()核心方法的实现逻辑最终获得一套可以迁移到任意社交关系数据上的可视化方案。项目背景为什么用网络图呈现一部小说在第 13 课 3-Data-Visualization/13-meaningful-visualizations/README.md 中课程讨论了有意义的数据可视化应具备的要素选择合适的图表类型、避免欺骗性图表、合理运用色彩、提升可读性以及尝试动画与 3D 图表。Dangerous Liaisons 项目正是动画可视化的实战载体。《Les Liaisons Dangereuses》危险关系是法国作家肖代洛·德拉克洛Choderlos de Laclos于 1782 年出版的书信体小说。故事以一系列信件展开记录了法国贵族之间复仇与阴谋的社交博弈。课程提出一个独特视角把每封信的寄信人from与收信人to建模为网络的边link把每位角色建模为网络的节点node从而用可视化直观发现叙事中的核心角色kingpins——谁收到的信最多谁的节点就越大社交网络的关键枢纽一目了然。本课配套提供了两个工程目录starter未完成的起点工程createLinks()留空待读者补全solution完整可运行的参考答案工程其 README.md 就是本项目的运行说明书本文后续内容即围绕它展开。环境准备Node 与 NPM 的版本要求在启动项目之前需要确认本机已安装 NPM 与 Node.js。从 solution/package.json 的engines字段可以看到明确约束engines: { node: 20.0.0 }这意味着推荐使用 Node.js 20.0.0 或更高版本。项目依赖如下dependencies依赖包版本作用vue^3.5.19前端 UI 框架模板中挂载 App 组件vue-d3-network0.1.28基于 D3 的网络图可视化库核心渲染引擎core-js^3.6.5兼容旧浏览器所需的 polyfill 支持开发期依赖devDependencies包括vue/cli-service、vue/cli-plugin-babel、vue/cli-plugin-eslint等 Vue CLI 5 系列工具它们负责项目的编译、热更新与代码规范检查。此外项目通过overrides字段锁定了qs、braces、serialize-javascript等传递依赖的版本用于规避已知安全与兼容性问题。安装依赖与运行项目按照 solution README 的标准流程进入项目目录后依次执行以下命令。下面以 solution 目录为例若从 starter 开始练习命令完全一致1. 安装依赖npm install该命令会读取 package.json 与package-lock.json安装 Vue、vue-d3-network 及全部构建工具链。2. 开发模式编译与热重载npm run serve该命令映射到vue-cli-service serve启动本地开发服务器。代码改动会触发热重载hot-reload即时刷新页面适合在编写createLinks()时边写边看效果。3. 生产构建编译与压缩npm run build映射到vue-cli-service build对工程进行生产环境编译与代码压缩minify产物输出到dist目录可部署到任意静态 Web 服务课程作业中也建议尝试将成品部署为静态 Web 应用。4. 代码检查与修复npm run lint映射到vue-cli-service lint基于 ESLint 与eslint-plugin-vue检查代码风格与潜在问题并尽可能自动修复。ESLint 配置位于 solution/package.json 的eslintConfig字段中采用plugin:vue/essential与eslint:recommended规则集。5. 自定义配置项目基于 Vue CLI 构建如需深度定制如调整 dev server 端口、代理、Webpack 行为可参考 Vue CLI 官方配置参考vue.config.js对应英文 README 中Customize configuration一节提到的 Configuration Reference。需要说明该链接为 Vue CLI 官方文档实际配置项以你使用的vue/cli-service5.x 版本为准。数据源解析letters.json 的结构与含义可视化的数据基础是 solution/src/assets/letters.json它收录了小说中全部 1261 封信件文件共 1261 行每条记录一个对象。每条记录包含以下字段字段示例含义letter_num1信件编号fromCécile de Volanges寄信人信件的起点toSophie Carnay收信人信件的终点date8/3/17**写信日期小说年份用**遮蔽locationUrsulines写信地点部分记录缺失该字段例如第一条记录表示塞西尔·德·沃朗热Cécile de Volanges写信给苏菲·卡尔奈Sophie Carnay。在后续的createLinks()实现中from与to正是构建边link的关键字段。核心实现补全 Nodes.vue 的 createLinks 方法项目的核心逻辑集中在 solution/src/components/Nodes.vue。模板部分通过vue-d3-network组件声明式渲染网络图template div classhello d3-network :net-nodesnodes :net-linkslinks :optionsoptions / /div /template在 starter/src/components/Nodes.vue 中createLinks()是留空待补全的方法。课程的作业要求补上如下双重循环遍历信件对象捕获每封信的to与from构建可视化库能够消费的links数组//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来自letters.json中的每一封信内层循环遍历角色名数组characters用字符串比较把letters[i].from和letters[i].to匹配为角色数组中的下标索引f与t调用this.links.push({ sid: f, tid: t })生成一条边记录——sid是源节点寄信人索引tid是目标节点收信人索引。sid/tid是vue-d3-network库约定的边link数据结构分别代表 source id 与 target id二者与节点数组中的id字段对应。这正是可视化库消费数据的核心约定。节点构建与网络参数解读created()生命周期钩子中完成了节点的初始化这部分在 starter 与 solution 中是一致的created() { 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, ]; 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), }); } }关键细节characters数组硬编码了小说中的 15 个角色名作为节点的全集节点大小与收信量挂钩_size取getCount(name) 20而getCount()统计某角色作为to收信人出现的次数——收到的信越多节点越大这正是找出叙事核心人物的可视化设计节点颜色随机生成_color通过Math.floor(Math.random() * 16777215).toString(16)生成 0x000000~0xFFFFFF 之间的随机十六进制颜色。网络图的渲染参数由计算属性options提供options() { return { force: 3000, // 节点间的力学布局强度 size: { w: 600, h: 600 }, // 画布尺寸 600x600 offset: { x: 0, y: 0 }, // 画布偏移 nodeLabels: true, // 显示节点标签角色名 linkLabels: true, // 显示边的标签 canvas: this.canvas, // 是否使用 Canvas 渲染默认 falseSVG }; }force: 3000控制力导向布局force-directed layout的斥力/引力强度数值越大节点越分散canvas由data()中的this.canvas默认false驱动为false时使用 SVG 渲染便于悬停样式与选中高亮为true时切换为 Canvas 渲染以支撑更大规模的节点数。组件装配与样式细节项目入口 solution/src/main.js 创建 Vue 实例并挂载App组件而 solution/src/App.vue 仅负责引入并渲染Nodes组件整个应用呈单组件的极简装配结构。Nodes.vue 的style段定义了可视化质感相关的样式值得关注的设计点默认节点填充色#dcfaf3浅青绿选中节点描边#caa455金色固定pinned节点描边为半透明紫色边的默认描边为半透明深绿rgba(18, 120, 98, 0.3)悬停时变为琥珀色rgba(250, 197, 65, 0.6)并加粗到 5px提供明显的交互反馈节点/边标签使用黑色填充边的标签通过translateY(-0.5em)微调垂直位置避免与连线重叠字体引入 Google Fonts 的 PT Sansuser-select: none避免拖拽节点时误选文字。运行效果与交互方式完成createLinks()补全后执行npm run serve浏览器打开本地开发地址即可看到动画网络图15 位角色作为节点散布在 600×600 的画布上信件往来形成有向连线收信越多的角色节点越大。你可以用鼠标拖拽节点观察力学布局的重新排布——这正是课程所说的pull the nodes around on the screen to shuffle the data around的交互体验。延伸从网络图回到有意义可视化的设计准则本项目属于第 13 课中动画与 3D 图表展示环节的落地实践。课程同时强调了在动手构建之前的几项设计准则可作为评估本项目的对照清单选择正确的图表类型课程给出了一张选型速查表——展示趋势用折线图比较类别用柱状图/饼图比较总量用饼图/堆叠柱状图展示关系用散点/折线/分面/双线图展示分布用散点/直方图/箱线图展示比例用饼图/环形图/华夫图。本项目属于展示关系选用网络图是合理映射避免欺骗性图表课程用多张反面案例翻转 X 轴、重排日期制造假趋势、翻转 Y 轴叠加误导配色、比例操控警示眼睛容易被图表欺骗色彩与可访问性色彩会传递含义如红色象征力量、蓝色象征信任与忠诚同时要关注色盲用户的阅读体验。本项目中的随机节点颜色是探索性数据可视化的常见做法若用于对外发布应改为精心设计的语义色板。挑战与扩展作业课程为该项目配套了两个进阶任务挑战Challenge去互联网上收集欺骗性可视化案例分析作者如何误导用户以及是否为故意为之并尝试把图表修正为应有的正确形态作业Assignmentassignment.md 要求参照本项目的代码模式用你自己的社交互动数据如社交媒体使用记录、家庭成员关系图mock 一份数据集构建一个展示独特社交网络的可视化 Web 应用。评分标准包括代码可正常运行建议部署为静态 Web 应用、README 注释完善、文档清晰。迁移到自有数据的核心步骤非常直接替换letters.json中的from/to字段为你的关系数据同步更新Nodes.vue中的characters角色数组即可createLinks()的解析逻辑无需改动。小结Dangerous Liaisons 项目是一个小而完整的 D3 可视化教学案例它以 5 条 npm 命令串联起从安装、开发、构建到检查的完整工程闭环用 60 行不到的 Vue 单文件组件演示了书信数据到网络图的建模过程。其价值不仅在于复现一部经典小说的社交关系更在于提供了一套可复用的关系数据 → 力导向网络图的实现范式与第 13 课关于图表选择、防欺骗、色彩与可读性的设计原则互为表里是理解有意义的数据可视化最直观的入门实践。【免费下载链接】Data-Science-For-Beginners10 Weeks, 20 Lessons, Data Science for All!项目地址: https://gitcode.com/GitHub_Trending/da/Data-Science-For-Beginners创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考