尧图网页设计 
用 Vue.js 与 D3 构建危险关系书信网络可视化Data-Science-For-Beginners 第 13 课实战项目运行与源码解析【免费下载链接】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 课「制作有意义的数据可视化」的配套实战项目solution 完整版展开讲解如何在本机搭建、运行并理解一个基于 Vue.js 与 D3 的交互式网络图应用其数据源是 1782 年法国书信体小说《危险关系》Les Liaisons Dangereuses的 175 封书信。读完本文你将掌握npm工作流下的安装、开发、构建与代码检查命令并能读懂Nodes.vue中从原始书信数据到力导向网络图的完整转换逻辑。一、项目背景用可视化回答谁是主角在 第 13 课课程文档 中作者系统讲解了数据可视化中的六类关键议题选择合适的图表类型、避免误导性图表、合理使用颜色、提升可读性、动画与 3D 展示以及构建创意可视化。课程的实战项目便是一个创意可视化的范例把《危险关系》这部书信体小说中人物之间的通信关系绘制成一张可拖拽的社交网络图——每个节点代表一位写信人或收信人每条连线代表一次书信往来运行后可以直观地看出谁是叙事网络中真正的枢纽人物如 Vicomte de Valmont 与 Marquise de Merteuil。项目使用vue-d3-network库基于 Vue.js 与 D3 封装的网络图组件实现。本仓库同时提供 starter 版留有待补全的createLinks()方法供学习者动手和 solution 版完整可运行实现本文以 solution 版为分析对象。二、环境要求Node.js 与 NPM项目通过 solution/package.json 声明运行环境其中engines字段明确要求engines: { node: 20.0.0 }即机器上需要安装Node.js 20.0.0 或更高版本NPM 随 Node.js 一同安装。这一点在原文档中已明确说明是本项目可运行的前提条件建议先执行node --version与npm --version确认环境满足要求。从 package.json 的依赖清单可以进一步了解技术栈运行时依赖dependenciesvue^3.5.19、vue-d3-network0.1.28、core-js^3.6.5开发依赖devDependenciesvue/cli-plugin-babel、vue/cli-plugin-eslint、vue/cli-service均为 ~5.0.8以及babel-eslint、eslint、eslint-plugin-vue、vue-template-compiler安全补丁overridesqs固定为 6.14.2、braces 3.0.3、serialize-javascript固定为 7.0.5用于规避依赖链中的已知漏洞browserslist 1%, last 2 versions, not dead决定 Babel 与 Autoprefixer 的转译目标浏览器范围。这里有一点值得注意package.json 声明的是 Vue 3^3.5.19而 src/main.js 中的挂载写法Vue.config.productionTip false、new Vue({ render: h h(App) }).$mount(#app)是 Vue 2 经典风格同时 devDependencies 中保留了vue-template-compilerVue 2 配套。从这套依赖组合可以推断该项目是在 Vue 2 时代搭建、后续版本号被升级到 Vue 3 的遗留工程运行时以仓库现状为准不必在本文范围内深究。三、项目结构solution 目录逐文件解读solution 版采用 Vue CLI 的标准目录布局solution/ ├── public/ │ ├── favicon.ico # 站点图标 │ └── index.html # HTML 入口模板 ├── src/ │ ├── assets/ │ │ └── letters.json # 175 封书信的结构化数据 │ ├── components/ │ │ └── Nodes.vue # 核心网络图组件 │ ├── App.vue # 根组件 │ └── main.js # Vue 实例入口 ├── babel.config.js # Babel 转译配置 └── package.json # 依赖与脚本定义App.vue 只做一件事导入并在根节点渲染Nodes组件是典型的薄壳根组件main.js 创建 Vue 实例并挂载到#app节点babel.config.js 使用vue/cli-plugin-babel/preset预设负责把现代 JavaScript 转译为兼容目标浏览器的代码数据的核心在 src/assets/letters.json可视化逻辑的核心在 src/components/Nodes.vue。四、数据层letters.json 的书信结构letters.json记录了《危险关系》全书的 175 封信每条记录是一个 JSON 对象字段结构如下节选自 letters.json{ letter_num: 1, from: Cécile de Volanges, to: Sophie Carnay, date: 8/3/17**, location: Ursulines }各字段含义字段说明letter_num信件的序号1175其中第 40 封后还有一个40-suite续条from写信人姓名to收信人姓名date写信日期书中为隐去年份写作17**的形式location写信地点部分条目缺失部分为…占位notes可选备注例如 4h am凌晨四点、duel challenge决斗挑战、death of Valmont瓦尔蒙之死等情节节点这套发件人—收件人的二元关系正是构建网络图的原料人物是节点node信件是连线link。五、核心实现Nodes.vue 的建图逻辑Nodes.vue 是项目的灵魂。模板中通过vue-d3-network提供的d3-network组件渲染网络图d3-network :net-nodesnodes :net-linkslinks :optionsoptions /传入三个数据属性节点数组nodes、连线数组links、渲染选项options。组件内部用 D3 的力导向布局force-directed layout自动排布节点。5.1 节点与连线的构建组件在created()生命周期钩子中完成数据装配分为三步第一步定义角色名单。characters数组列出了叙事中出现的 15 个写信/收信主体例如Chevalier Danceny、Marquise de Merteuil、Cécile Volanges、Vicomte de Valmont以及Anonyme匿名者、…等特殊占位角色。第二步调用createLinks(characters)建立连线。这是课程要求学习者自行补全的关键方法solution 中的完整实现是一个双重循环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.json的每一封信内层在characters名单中查找发件人与收件人的下标再把{ sid: 发件人下标, tid: 收件人下标 }追加进links数组。vue-d3-network正是依据sidsource id与tidtarget id在节点之间绘制连线因此把人物姓名转换为数字下标是让库能消费数据的关键一步。第三步生成节点数组。对每个角色创建一个节点对象this.nodes.push({ id: j, name: characters[j], _size: this.getCount(characters[j]) 20, _color: # Math.floor(Math.random() * 16777215).toString(16), });id为角色在名单中的下标_size用getCount(name)计算——该方法统计该角色作为收信人出现的次数入度再加 20 作为节点半径基数收信越多节点越大_color为随机生成的十六进制颜色Math.random()取 00xFFFFFF 再转 16 进制所以每次刷新配色都可能不同。5.2 渲染选项options计算属性向d3-network传递布局与展示参数options() { return { force: 3000, // 力导向布局的斥力强度 size: { w: 600, h: 600 }, // 画布尺寸宽高均为 600px offset: { x: 0, y: 0 }, // 画布偏移 nodeLabels: true, // 显示节点标签角色名 linkLabels: true, // 显示连线标签 canvas: this.canvas, // 是否使用 Canvas 渲染data 中默认为 false即 SVG 渲染 }; }其中force: 3000决定节点间的相互斥力数值越大节点越分散linkLabels: true会让每条连线上都显示标签。样式部分Nodes.vue 的style块还定义了选中、固定pinned、悬停高亮等交互状态的视觉效果普通节点为浅青绿色#dcfaf3选中节点描边为金色#caa455悬停时连线与节点描边变为琥珀色rgba(250, 197, 65, 0.6)。5.3 运行效果项目运行后页面中央即呈现这张可交互的书信社交网络图读者可以拖拽节点重新布局从节点大小与连线密度快速判断人物关系的主次六、完整运行步骤继承原文档全部命令原文档给出了四条核心命令以下逐一说明其作用与输出结果。6.1 安装依赖npm install在 solution 目录下执行。该命令会读取 package.json 与仓库自带的package-lock.json安装vue、vue-d3-network等全部依赖并写入node_modules目录。首次安装耗时取决于网络状况。6.2 开发模式编译并热重载npm run serve对应 package.json 中的serve: vue-cli-service serve。它会启动一个本地开发服务器编译项目并监听文件变化修改代码后页面自动热重载无需手动刷新。终端会打印出本地访问地址通常为http://localhost:8080。这是日常开发调试推荐使用的命令。6.3 生产构建编译并压缩npm run build对应build: vue-cli-service build。它会对代码进行编译与压缩minify输出静态资源到dist/目录用于部署上线。与开发模式相比生产构建会启用代码压缩、去除开发期提示产物体积更小、加载更快。6.4 代码检查Lint 并自动修复npm run lint对应lint: vue-cli-service lint。它基于 ESLint配置见 package.json 的eslintConfig字段plugin:vue/essential加eslint:recommended检查源码中的语法与风格问题能自动修复的会直接修复不能自动修复的会列出提示。建议提交代码前运行一次。七、定制与进阶从 solution 走向自己的可视化原文档最后提示如需自定义配置可参考 Vue CLI 的配置参考文档。在仓库范围内你可以通过以下几种方式进一步定制本项目调整布局参数修改 Nodes.vue 中options里的force斥力强度与size画布尺寸例如把size改为{ w: 800, h: 600 }以获得更宽的画布切换渲染后端把data()中的canvas: false改为true让d3-network改用 Canvas 渲染适合节点数量庞大的网络图更换数据源保持{ from, to, ... }结构的前提下替换letters.json的内容即可把同一套网络图应用到任何谁联系谁型的数据如邮件往来、合著论文、社交关系从 starter 开始练习对照 starter 与 solution 的差异自行补全createLinks()方法是复现本课学习目标的推荐路径结合课程作业完成第 13 课的 assignment把课程中选择正确图表类型避免误导性图表注重可读性与配色等原则应用到自己的数据上。八、结语《危险关系》项目以不到百行的核心代码演示了从结构化 JSON 数据到交互式力导向网络图的完整链路letters.json提供关系数据createLinks()把姓名映射为节点下标getCount()用入度决定节点大小d3-network组件负责布局渲染与交互。通过npm install→npm run serve→npm run build→npm run lint这一套标准工作流你可以快速把它跑起来也可以以此为模板把任何关系型数据变成一眼看清主角的可视化作品。【免费下载链接】Data-Science-For-Beginners10 Weeks, 20 Lessons, Data Science for All!项目地址: https://gitcode.com/GitHub_Trending/da/Data-Science-For-Beginners创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 用 Vue.js 与 D3 构建“危险关系“书信网络可视化：Data-Science-For-Beginners 第 13 课实战项目运行与源码解析
用 Vue.js 与 D3 构建危险关系书信网络可视化Data-Science-For-Beginners 第 13 课实战项目运行与源码解析【免费下载链接】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 课「制作有意义的数据可视化」的配套实战项目solution 完整版展开讲解如何在本机搭建、运行并理解一个基于 Vue.js 与 D3 的交互式网络图应用其数据源是 1782 年法国书信体小说《危险关系》Les Liaisons Dangereuses的 175 封书信。读完本文你将掌握npm工作流下的安装、开发、构建与代码检查命令并能读懂Nodes.vue中从原始书信数据到力导向网络图的完整转换逻辑。一、项目背景用可视化回答谁是主角在 第 13 课课程文档 中作者系统讲解了数据可视化中的六类关键议题选择合适的图表类型、避免误导性图表、合理使用颜色、提升可读性、动画与 3D 展示以及构建创意可视化。课程的实战项目便是一个创意可视化的范例把《危险关系》这部书信体小说中人物之间的通信关系绘制成一张可拖拽的社交网络图——每个节点代表一位写信人或收信人每条连线代表一次书信往来运行后可以直观地看出谁是叙事网络中真正的枢纽人物如 Vicomte de Valmont 与 Marquise de Merteuil。项目使用vue-d3-network库基于 Vue.js 与 D3 封装的网络图组件实现。本仓库同时提供 starter 版留有待补全的createLinks()方法供学习者动手和 solution 版完整可运行实现本文以 solution 版为分析对象。二、环境要求Node.js 与 NPM项目通过 solution/package.json 声明运行环境其中engines字段明确要求engines: { node: 20.0.0 }即机器上需要安装Node.js 20.0.0 或更高版本NPM 随 Node.js 一同安装。这一点在原文档中已明确说明是本项目可运行的前提条件建议先执行node --version与npm --version确认环境满足要求。从 package.json 的依赖清单可以进一步了解技术栈运行时依赖dependenciesvue^3.5.19、vue-d3-network0.1.28、core-js^3.6.5开发依赖devDependenciesvue/cli-plugin-babel、vue/cli-plugin-eslint、vue/cli-service均为 ~5.0.8以及babel-eslint、eslint、eslint-plugin-vue、vue-template-compiler安全补丁overridesqs固定为 6.14.2、braces 3.0.3、serialize-javascript固定为 7.0.5用于规避依赖链中的已知漏洞browserslist 1%, last 2 versions, not dead决定 Babel 与 Autoprefixer 的转译目标浏览器范围。这里有一点值得注意package.json 声明的是 Vue 3^3.5.19而 src/main.js 中的挂载写法Vue.config.productionTip false、new Vue({ render: h h(App) }).$mount(#app)是 Vue 2 经典风格同时 devDependencies 中保留了vue-template-compilerVue 2 配套。从这套依赖组合可以推断该项目是在 Vue 2 时代搭建、后续版本号被升级到 Vue 3 的遗留工程运行时以仓库现状为准不必在本文范围内深究。三、项目结构solution 目录逐文件解读solution 版采用 Vue CLI 的标准目录布局solution/ ├── public/ │ ├── favicon.ico # 站点图标 │ └── index.html # HTML 入口模板 ├── src/ │ ├── assets/ │ │ └── letters.json # 175 封书信的结构化数据 │ ├── components/ │ │ └── Nodes.vue # 核心网络图组件 │ ├── App.vue # 根组件 │ └── main.js # Vue 实例入口 ├── babel.config.js # Babel 转译配置 └── package.json # 依赖与脚本定义App.vue 只做一件事导入并在根节点渲染Nodes组件是典型的薄壳根组件main.js 创建 Vue 实例并挂载到#app节点babel.config.js 使用vue/cli-plugin-babel/preset预设负责把现代 JavaScript 转译为兼容目标浏览器的代码数据的核心在 src/assets/letters.json可视化逻辑的核心在 src/components/Nodes.vue。四、数据层letters.json 的书信结构letters.json记录了《危险关系》全书的 175 封信每条记录是一个 JSON 对象字段结构如下节选自 letters.json{ letter_num: 1, from: Cécile de Volanges, to: Sophie Carnay, date: 8/3/17**, location: Ursulines }各字段含义字段说明letter_num信件的序号1175其中第 40 封后还有一个40-suite续条from写信人姓名to收信人姓名date写信日期书中为隐去年份写作17**的形式location写信地点部分条目缺失部分为…占位notes可选备注例如 4h am凌晨四点、duel challenge决斗挑战、death of Valmont瓦尔蒙之死等情节节点这套发件人—收件人的二元关系正是构建网络图的原料人物是节点node信件是连线link。五、核心实现Nodes.vue 的建图逻辑Nodes.vue 是项目的灵魂。模板中通过vue-d3-network提供的d3-network组件渲染网络图d3-network :net-nodesnodes :net-linkslinks :optionsoptions /传入三个数据属性节点数组nodes、连线数组links、渲染选项options。组件内部用 D3 的力导向布局force-directed layout自动排布节点。5.1 节点与连线的构建组件在created()生命周期钩子中完成数据装配分为三步第一步定义角色名单。characters数组列出了叙事中出现的 15 个写信/收信主体例如Chevalier Danceny、Marquise de Merteuil、Cécile Volanges、Vicomte de Valmont以及Anonyme匿名者、…等特殊占位角色。第二步调用createLinks(characters)建立连线。这是课程要求学习者自行补全的关键方法solution 中的完整实现是一个双重循环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.json的每一封信内层在characters名单中查找发件人与收件人的下标再把{ sid: 发件人下标, tid: 收件人下标 }追加进links数组。vue-d3-network正是依据sidsource id与tidtarget id在节点之间绘制连线因此把人物姓名转换为数字下标是让库能消费数据的关键一步。第三步生成节点数组。对每个角色创建一个节点对象this.nodes.push({ id: j, name: characters[j], _size: this.getCount(characters[j]) 20, _color: # Math.floor(Math.random() * 16777215).toString(16), });id为角色在名单中的下标_size用getCount(name)计算——该方法统计该角色作为收信人出现的次数入度再加 20 作为节点半径基数收信越多节点越大_color为随机生成的十六进制颜色Math.random()取 00xFFFFFF 再转 16 进制所以每次刷新配色都可能不同。5.2 渲染选项options计算属性向d3-network传递布局与展示参数options() { return { force: 3000, // 力导向布局的斥力强度 size: { w: 600, h: 600 }, // 画布尺寸宽高均为 600px offset: { x: 0, y: 0 }, // 画布偏移 nodeLabels: true, // 显示节点标签角色名 linkLabels: true, // 显示连线标签 canvas: this.canvas, // 是否使用 Canvas 渲染data 中默认为 false即 SVG 渲染 }; }其中force: 3000决定节点间的相互斥力数值越大节点越分散linkLabels: true会让每条连线上都显示标签。样式部分Nodes.vue 的style块还定义了选中、固定pinned、悬停高亮等交互状态的视觉效果普通节点为浅青绿色#dcfaf3选中节点描边为金色#caa455悬停时连线与节点描边变为琥珀色rgba(250, 197, 65, 0.6)。5.3 运行效果项目运行后页面中央即呈现这张可交互的书信社交网络图读者可以拖拽节点重新布局从节点大小与连线密度快速判断人物关系的主次六、完整运行步骤继承原文档全部命令原文档给出了四条核心命令以下逐一说明其作用与输出结果。6.1 安装依赖npm install在 solution 目录下执行。该命令会读取 package.json 与仓库自带的package-lock.json安装vue、vue-d3-network等全部依赖并写入node_modules目录。首次安装耗时取决于网络状况。6.2 开发模式编译并热重载npm run serve对应 package.json 中的serve: vue-cli-service serve。它会启动一个本地开发服务器编译项目并监听文件变化修改代码后页面自动热重载无需手动刷新。终端会打印出本地访问地址通常为http://localhost:8080。这是日常开发调试推荐使用的命令。6.3 生产构建编译并压缩npm run build对应build: vue-cli-service build。它会对代码进行编译与压缩minify输出静态资源到dist/目录用于部署上线。与开发模式相比生产构建会启用代码压缩、去除开发期提示产物体积更小、加载更快。6.4 代码检查Lint 并自动修复npm run lint对应lint: vue-cli-service lint。它基于 ESLint配置见 package.json 的eslintConfig字段plugin:vue/essential加eslint:recommended检查源码中的语法与风格问题能自动修复的会直接修复不能自动修复的会列出提示。建议提交代码前运行一次。七、定制与进阶从 solution 走向自己的可视化原文档最后提示如需自定义配置可参考 Vue CLI 的配置参考文档。在仓库范围内你可以通过以下几种方式进一步定制本项目调整布局参数修改 Nodes.vue 中options里的force斥力强度与size画布尺寸例如把size改为{ w: 800, h: 600 }以获得更宽的画布切换渲染后端把data()中的canvas: false改为true让d3-network改用 Canvas 渲染适合节点数量庞大的网络图更换数据源保持{ from, to, ... }结构的前提下替换letters.json的内容即可把同一套网络图应用到任何谁联系谁型的数据如邮件往来、合著论文、社交关系从 starter 开始练习对照 starter 与 solution 的差异自行补全createLinks()方法是复现本课学习目标的推荐路径结合课程作业完成第 13 课的 assignment把课程中选择正确图表类型避免误导性图表注重可读性与配色等原则应用到自己的数据上。八、结语《危险关系》项目以不到百行的核心代码演示了从结构化 JSON 数据到交互式力导向网络图的完整链路letters.json提供关系数据createLinks()把姓名映射为节点下标getCount()用入度决定节点大小d3-network组件负责布局渲染与交互。通过npm install→npm run serve→npm run build→npm run lint这一套标准工作流你可以快速把它跑起来也可以以此为模板把任何关系型数据变成一眼看清主角的可视化作品。【免费下载链接】Data-Science-For-Beginners10 Weeks, 20 Lessons, Data Science for All!项目地址: https://gitcode.com/GitHub_Trending/da/Data-Science-For-Beginners创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考