尧图网站建设 
Data-Science-For-Beginners 第 13 课实战用 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 课Making Meaningful Visualizations的课后项目solution完整实现讲解如何用 Vue.js 与 vue-d3-network 把 18 世纪书信体小说《危险关系》中的 1260 封书信转换成可拖拽、可交互的动画社交网络图。读完本文你将掌握该项目的环境配置、npm构建流程、createLinks()核心算法与vue-d3-network选项参数的全部细节并能从零跑通这个可视化应用。项目定位课程中的创意可视化实战在课程主文档 3-Data-Visualization/13-meaningful-visualizations/README.md 中学习者先后掌握了「选择正确的图表类型」「避免欺骗性图表」「色彩运用」「为可读性美化图表」以及「动画与 3D 图表展示」等技能。本章的课后实战要求把理论落到一个具体场景以 D3.js 在 Vue.js 应用中构建《危险关系》Les Liaisons Dangereuses书信网络的可视化。《危险关系》是肖代洛·德·拉克洛Choderlos de Laclos1782 年出版的书信体小说故事以一系列信件展开描绘了法国贵族瓦尔蒙子爵与梅尔特伊侯爵夫人之间互相算计、报复与制造麻烦的社交博弈。项目把这些「谁写给谁」的信件关系可视化让读者一眼看出叙事中的关键人物kingpins。本仓库在solution目录中给出了完整工程并在 starter 目录中保留了供读者自行补全的起始模板。本文以solution中的 README.md西语译文版为骨架展开说明。环境准备Node 与 NPM 版本要求项目是标准的 Vue CLI 工程运行前必须确保机器上已安装 Node.js 与 NPM。从 starter/README.md 可以看到明确约束Node 版本需要 20.0.0。这一约束也在 solution/package.json 的engines字段中声明engines: { node: 20.0.0 }因此如果你的 Node 版本低于 20请先升级 Node.js 与配套的 npm 再继续后续步骤。项目安装与启动npm 命令速查进入solution目录后按顺序执行以下命令即可完成从安装到运行的完整流程以下命令均来自 solution/README.md与英文原版 3-Data-Visualization/13-meaningful-visualizations/solution/README.md 一致安装依赖npm install该命令会根据 package.json 拉取全部依赖核心依赖包括vue^3.5.19 —— 应用框架vue-d3-network0.1.28 —— 基于 Vue.js 与 D3 的网络图可视化库负责节点/连线的力学布局与渲染core-js^3.6.5 —— 兼容性 polyfill。开发依赖则包含vue/cli-service~5.0.8、vue/cli-plugin-babel、vue/cli-plugin-eslint、eslint与eslint-plugin-vue等 Vue CLI 5 生态组件并设置了overrides将qs、braces、serialize-javascript等传递依赖锁定到安全版本确保安装结果可控。开发模式编译并热重载npm run serve该命令映射到package.json中的serve: vue-cli-service serve会启动本地开发服务器并在代码保存时自动热重载hot-reload。启动成功后浏览器访问默认地址通常为http://localhost:8080即可看到可视化页面。生产构建编译并压缩npm run build映射到build: vue-cli-service build输出经过压缩与优化后的静态产物可直接部署到任意静态托管环境。代码检查与修复npm run lint映射到lint: vue-cli-service lint按 package.json 中的eslintConfigplugin:vue/essentialeslint:recommended使用babel-eslint作为 parser检查并尝试自动修复代码风格问题。自定义配置Vue CLI 项目可通过根目录的vue.config.js自定义构建行为如代理、publicPath、输出目录等官方配置参考文档见 README 中给出的 Vue CLI 配置参考页cli.vuejs.org/config。本仓库示例工程未包含vue.config.js使用 Vue CLI 默认配置即可正常运行。应用骨架解析从入口到组件项目入口由 src/main.js 负责import Vue from vue; import App from ./App.vue; Vue.config.productionTip false; new Vue({ render: h h(App) }).$mount(#app);页面模板定义在 public/index.html标题为 Les Liaisons Dangereuses: Visualization包含挂载点div idapp/div并给出了未启用 JavaScript 时的降级提示。根组件 src/App.vue 非常精简只做一件事渲染Nodes组件template div idapp Nodes / /div /template script import Nodes from ./components/Nodes; export default { name: App, components: { Nodes, }, }; /script真正承载可视化逻辑的是 src/components/Nodes.vue它通过vue-d3-network的d3-network组件完成渲染并接收三个核心数据属性net-nodes节点数组、net-links连线数组与options渲染选项。数据资产letters.json 的书信结构src/assets/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信件日期小说年代设定为 17** 年日期做了模糊化处理location信件落款地点部分记录缺省如第 3 封信没有location字段。注意部分记录的from字段在数据中写作 Cécile de Volanges第 1 封与 Cécile Volanges第 3 封两种变体而组件中的角色名单只包含 Cécile Volanges。这种命名不一致意味着createLinks()中基于字符串全等匹配的写法下个别信件可能匹配不到目标节点这也侧面说明真实世界的数据清洗Data Preparation在可视化前有多重要——课程第 08 课正是「数据准备」。核心算法createLinks() 构建连线createLinks()是整个可视化的灵魂负责把「谁写给谁」的文本关系翻译成vue-d3-network能消费的连线对象。课程 README 给出的补全代码也就是 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来自letters.json的 1260 封信内层循环遍历characters15 位主要角色组成的数组在created()生命周期中定义当角色名与当前信件的from相等时把角色下标存入fsource id与to相等时存入ttarget id每封信生成一个{ sid: f, tid: t }连线对象并push进this.linkssid/tid正是vue-d3-network约定使用的「源节点 id / 目标节点 id」字段名。节点的构建与视觉编码节点本身在created()钩子中构建其中用到了两个有意思的视觉编码this.nodes.push({ id: j, name: characters[j], _size: this.getCount(characters[j]) 20, _color: # Math.floor(Math.random() * 16777215).toString(16), });_size节点的物理大小与「收信数量」挂钩。getCount(name)统计该角色作为to收信人出现的次数 20保证即使一封信都没收到节点也保留 20 的基础尺寸。收信越多节点越大视觉上自然突出社交网络中的「枢纽人物」_color随机生成十六进制颜色每次刷新都会得到不同的配色方案。渲染选项 options 详解options计算属性向vue-d3-network传递了关键的力学与显示参数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 }画布尺寸宽高各 600 像素offset{ x: 0, y: 0 }画布相对偏移量nodeLabelstrue显示节点标签角色名linkLabelstrue显示连线标签canvasfalse是否使用 Canvas 渲染模式false表示使用 SVG 模式。data()中预留了canvas: false开关可切换渲染后端样式与交互Nodes.vue 的style部分定义了交互反馈节点默认填充色为#dcfaf3选中时描边变为金色#caa455固定pinned时描边为紫色半透明连线默认rgba(18, 120, 98, 0.3)半透明墨绿色悬停时节点与连线高亮为琥珀色并加粗到 5px页面使用 PT Sans 字体整体以白色背景呈现。应用运行后你可以直接用鼠标拖拽画面中的节点vue-d3-network内置的力学布局会实时重新排布形成动画效果——这正是课程「Animation and 3D chart display」小节强调的「让数据动起来」的实践形态。调试建议与常见问题基于 package.json 与源码结构可以给出几条可验证的排错路径Node 版本过低npm install或npm run serve报 engines 相关错误时检查node -v是否满足20.0.0页面空白/节点不显示检查links是否为空数组。若createLinks()未被调用或characters名单与letters.json中的from/to名称不一致将导致sid/tid全部为 0网络图退化成一团开发端口冲突Vue CLI 默认 8080 被占用时会自动递增端口可在终端日志中确认最终访问地址随机颜色每次刷新节点颜色都会变化属预期行为因为_color由Math.random()生成——若要固定品牌色系可以像课程「Color」小节建议的那样使用经过校验的调色板并为色盲用户考虑可访问性。延伸从本项目走向更复杂的可视化本项目是「创意可视化」creative visualization的入门范例它把一张静态的书信表格升维为可交互的关系图谱。课程主文档还给出了两个进阶方向供参考动画与滚动叙事scrollytelling如 The Guardian 的 Bussed Out 案例将 D3 可视化与滚动叙述结合更大型的网络作品如 Shirley Wu 用 D3 创作的 film flowers 等交互式数据艺术。如果希望进一步检验对「有意义的可视化」的理解可以完成课程 assignment用同样的 Vue D3 技术栈为任意书信体/日记体文本例如《少年维特的烦恼》《奥赛罗》书信段落构建自己的网络可视化并把节点大小、颜色与角色重要程度挂钩做出你自己的「社交关系图谱」。【免费下载链接】Data-Science-For-Beginners10 Weeks, 20 Lessons, Data Science for All!项目地址: https://gitcode.com/GitHub_Trending/da/Data-Science-For-Beginners创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Data-Science-For-Beginners 第 13 课实战：用 Vue.js + D3 构建《危险关系》书信社交网络可视化
Data-Science-For-Beginners 第 13 课实战用 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 课Making Meaningful Visualizations的课后项目solution完整实现讲解如何用 Vue.js 与 vue-d3-network 把 18 世纪书信体小说《危险关系》中的 1260 封书信转换成可拖拽、可交互的动画社交网络图。读完本文你将掌握该项目的环境配置、npm构建流程、createLinks()核心算法与vue-d3-network选项参数的全部细节并能从零跑通这个可视化应用。项目定位课程中的创意可视化实战在课程主文档 3-Data-Visualization/13-meaningful-visualizations/README.md 中学习者先后掌握了「选择正确的图表类型」「避免欺骗性图表」「色彩运用」「为可读性美化图表」以及「动画与 3D 图表展示」等技能。本章的课后实战要求把理论落到一个具体场景以 D3.js 在 Vue.js 应用中构建《危险关系》Les Liaisons Dangereuses书信网络的可视化。《危险关系》是肖代洛·德·拉克洛Choderlos de Laclos1782 年出版的书信体小说故事以一系列信件展开描绘了法国贵族瓦尔蒙子爵与梅尔特伊侯爵夫人之间互相算计、报复与制造麻烦的社交博弈。项目把这些「谁写给谁」的信件关系可视化让读者一眼看出叙事中的关键人物kingpins。本仓库在solution目录中给出了完整工程并在 starter 目录中保留了供读者自行补全的起始模板。本文以solution中的 README.md西语译文版为骨架展开说明。环境准备Node 与 NPM 版本要求项目是标准的 Vue CLI 工程运行前必须确保机器上已安装 Node.js 与 NPM。从 starter/README.md 可以看到明确约束Node 版本需要 20.0.0。这一约束也在 solution/package.json 的engines字段中声明engines: { node: 20.0.0 }因此如果你的 Node 版本低于 20请先升级 Node.js 与配套的 npm 再继续后续步骤。项目安装与启动npm 命令速查进入solution目录后按顺序执行以下命令即可完成从安装到运行的完整流程以下命令均来自 solution/README.md与英文原版 3-Data-Visualization/13-meaningful-visualizations/solution/README.md 一致安装依赖npm install该命令会根据 package.json 拉取全部依赖核心依赖包括vue^3.5.19 —— 应用框架vue-d3-network0.1.28 —— 基于 Vue.js 与 D3 的网络图可视化库负责节点/连线的力学布局与渲染core-js^3.6.5 —— 兼容性 polyfill。开发依赖则包含vue/cli-service~5.0.8、vue/cli-plugin-babel、vue/cli-plugin-eslint、eslint与eslint-plugin-vue等 Vue CLI 5 生态组件并设置了overrides将qs、braces、serialize-javascript等传递依赖锁定到安全版本确保安装结果可控。开发模式编译并热重载npm run serve该命令映射到package.json中的serve: vue-cli-service serve会启动本地开发服务器并在代码保存时自动热重载hot-reload。启动成功后浏览器访问默认地址通常为http://localhost:8080即可看到可视化页面。生产构建编译并压缩npm run build映射到build: vue-cli-service build输出经过压缩与优化后的静态产物可直接部署到任意静态托管环境。代码检查与修复npm run lint映射到lint: vue-cli-service lint按 package.json 中的eslintConfigplugin:vue/essentialeslint:recommended使用babel-eslint作为 parser检查并尝试自动修复代码风格问题。自定义配置Vue CLI 项目可通过根目录的vue.config.js自定义构建行为如代理、publicPath、输出目录等官方配置参考文档见 README 中给出的 Vue CLI 配置参考页cli.vuejs.org/config。本仓库示例工程未包含vue.config.js使用 Vue CLI 默认配置即可正常运行。应用骨架解析从入口到组件项目入口由 src/main.js 负责import Vue from vue; import App from ./App.vue; Vue.config.productionTip false; new Vue({ render: h h(App) }).$mount(#app);页面模板定义在 public/index.html标题为 Les Liaisons Dangereuses: Visualization包含挂载点div idapp/div并给出了未启用 JavaScript 时的降级提示。根组件 src/App.vue 非常精简只做一件事渲染Nodes组件template div idapp Nodes / /div /template script import Nodes from ./components/Nodes; export default { name: App, components: { Nodes, }, }; /script真正承载可视化逻辑的是 src/components/Nodes.vue它通过vue-d3-network的d3-network组件完成渲染并接收三个核心数据属性net-nodes节点数组、net-links连线数组与options渲染选项。数据资产letters.json 的书信结构src/assets/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信件日期小说年代设定为 17** 年日期做了模糊化处理location信件落款地点部分记录缺省如第 3 封信没有location字段。注意部分记录的from字段在数据中写作 Cécile de Volanges第 1 封与 Cécile Volanges第 3 封两种变体而组件中的角色名单只包含 Cécile Volanges。这种命名不一致意味着createLinks()中基于字符串全等匹配的写法下个别信件可能匹配不到目标节点这也侧面说明真实世界的数据清洗Data Preparation在可视化前有多重要——课程第 08 课正是「数据准备」。核心算法createLinks() 构建连线createLinks()是整个可视化的灵魂负责把「谁写给谁」的文本关系翻译成vue-d3-network能消费的连线对象。课程 README 给出的补全代码也就是 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来自letters.json的 1260 封信内层循环遍历characters15 位主要角色组成的数组在created()生命周期中定义当角色名与当前信件的from相等时把角色下标存入fsource id与to相等时存入ttarget id每封信生成一个{ sid: f, tid: t }连线对象并push进this.linkssid/tid正是vue-d3-network约定使用的「源节点 id / 目标节点 id」字段名。节点的构建与视觉编码节点本身在created()钩子中构建其中用到了两个有意思的视觉编码this.nodes.push({ id: j, name: characters[j], _size: this.getCount(characters[j]) 20, _color: # Math.floor(Math.random() * 16777215).toString(16), });_size节点的物理大小与「收信数量」挂钩。getCount(name)统计该角色作为to收信人出现的次数 20保证即使一封信都没收到节点也保留 20 的基础尺寸。收信越多节点越大视觉上自然突出社交网络中的「枢纽人物」_color随机生成十六进制颜色每次刷新都会得到不同的配色方案。渲染选项 options 详解options计算属性向vue-d3-network传递了关键的力学与显示参数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 }画布尺寸宽高各 600 像素offset{ x: 0, y: 0 }画布相对偏移量nodeLabelstrue显示节点标签角色名linkLabelstrue显示连线标签canvasfalse是否使用 Canvas 渲染模式false表示使用 SVG 模式。data()中预留了canvas: false开关可切换渲染后端样式与交互Nodes.vue 的style部分定义了交互反馈节点默认填充色为#dcfaf3选中时描边变为金色#caa455固定pinned时描边为紫色半透明连线默认rgba(18, 120, 98, 0.3)半透明墨绿色悬停时节点与连线高亮为琥珀色并加粗到 5px页面使用 PT Sans 字体整体以白色背景呈现。应用运行后你可以直接用鼠标拖拽画面中的节点vue-d3-network内置的力学布局会实时重新排布形成动画效果——这正是课程「Animation and 3D chart display」小节强调的「让数据动起来」的实践形态。调试建议与常见问题基于 package.json 与源码结构可以给出几条可验证的排错路径Node 版本过低npm install或npm run serve报 engines 相关错误时检查node -v是否满足20.0.0页面空白/节点不显示检查links是否为空数组。若createLinks()未被调用或characters名单与letters.json中的from/to名称不一致将导致sid/tid全部为 0网络图退化成一团开发端口冲突Vue CLI 默认 8080 被占用时会自动递增端口可在终端日志中确认最终访问地址随机颜色每次刷新节点颜色都会变化属预期行为因为_color由Math.random()生成——若要固定品牌色系可以像课程「Color」小节建议的那样使用经过校验的调色板并为色盲用户考虑可访问性。延伸从本项目走向更复杂的可视化本项目是「创意可视化」creative visualization的入门范例它把一张静态的书信表格升维为可交互的关系图谱。课程主文档还给出了两个进阶方向供参考动画与滚动叙事scrollytelling如 The Guardian 的 Bussed Out 案例将 D3 可视化与滚动叙述结合更大型的网络作品如 Shirley Wu 用 D3 创作的 film flowers 等交互式数据艺术。如果希望进一步检验对「有意义的可视化」的理解可以完成课程 assignment用同样的 Vue D3 技术栈为任意书信体/日记体文本例如《少年维特的烦恼》《奥赛罗》书信段落构建自己的网络可视化并把节点大小、颜色与角色重要程度挂钩做出你自己的「社交关系图谱」。【免费下载链接】Data-Science-For-Beginners10 Weeks, 20 Lessons, Data Science for All!项目地址: https://gitcode.com/GitHub_Trending/da/Data-Science-For-Beginners创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考