尧图网页设计 
用 vue-d3-network 构建自定义社交网络可视化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 课Making Meaningful Visualizations的课后作业展开作业要求你复用本仓库提供的前端模板项目Vue.js D3 网络可视化库vue-d3-network把自己真实的社会关系数据社交平台互动、家庭成员等转换成交互式社交网络图并发布为可运行的 Web 应用。读完本文你将掌握starter项目的目录结构与数据模型、补全createLinks()连边逻辑的完整方法、npm脚本的运行与构建流程以及如何替换数据源、按评估标准打磨并部署一个属于你自己的自定义可视化应用。上图是模板项目完成后的效果《危险关系》Les Liaisons Dangereuses这部 1782 年的书信体小说中每个人物是一个节点每封信是一条边节点可以被拖拽、数据实时重排从而直观发现叙事中的关键人物。作业的核心就是把这套机制迁移到你自己的数据上。作业目标从模板出发构建你自己的社交网络作业原文关联作业文档给出的核心要求是使用本项目中的代码模板创建社交网络模拟你自己的社交互动数据。你可以绘制自己的社交媒体使用地图也可以创建一张展示家庭成员关系的图表最终产出一个令人印象深刻的 Web 应用展示独特的社交网络可视化。结合第 13 课正文课程 README可知这堂课的完整知识链路是选择正确的图表类型 → 避免欺骗性图表 → 正确处理颜色 → 为可读性做样式设计 → 动画与 3D 展示 → 最终动手做一个有创意的可视化。而本作业恰好落在最后一环把网络关系这种常见但难以用普通柱状图、饼图表达的数据用节点-连线图呈现。按课程给出的图表选型表展示关系relationships应使用 Scatter、Line、Facet、Dual Line 等图形而人物/实体之间的关系网络则更适合本文所用的 D3 力导向网络图。模板项目结构需要改动的地方很少作业基于starter模板starter 目录其结构如下starter/ ├── public/ │ ├── favicon.ico │ └── index.html ├── src/ │ ├── assets/ │ │ └── letters.json # 关系数据原为小说信件 │ ├── components/ │ │ └── Nodes.vue # 可视化核心组件需要你补全 │ ├── App.vue # 根组件仅挂载 Nodes / │ └── main.js # Vue 应用入口 ├── package.json ├── babel.config.js └── package-lock.json其中 App.vue 只负责渲染Nodes /组件main.js 是入口采用new Vue({ render: h h(App) }).$mount(#app)的方式把应用挂载到#app上。你真正需要动脑的只有两个文件Nodes.vue逻辑和letters.json数据。环境与依赖要求starter/package.json 中明确了运行前提Node.js 20.0.0engines字段声明核心依赖vue^3.5.16、vue-d3-network固定版本 0.1.28、core-js^3.6.5开发依赖为 Vue CLI 5 系列vue/cli-service等三个 npm 脚本npm run serve本地开发热重载npm run build编译并压缩生产产物输出到dist/npm run lint代码检查与自动修复。数据模型把关系变成 JSON模板的关系数据存放在 starter/src/assets/letters.json共 1200 条记录每条记录的结构如下{ 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两个字段一条记录 一条有向边。因此当你要构建自己的社交网络时只需把letters.json替换为具有相同from/to结构的 JSON 即可例如社交互动{ from: 我, to: 好友A }表示我主动联系过好友 A家庭关系{ from: 父亲, to: 我 }表示血缘/抚养方向的连接邮件往来、Git 提交者与代码评审者、会议参与者……凡是谁与谁有关系的数据都适用。核心实现理解 Nodes.vue 的三个关键部分starter/src/components/Nodes.vue 是可视化的心脏它由三块组成。1. 模板与组件注册template div classhello d3-network :net-nodesnodes :net-linkslinks :optionsoptions / /div /template script import D3Network from vue-d3-network; import letters from ../assets/letters.json;模板通过vue-d3-network提供的d3-network组件渲染网络图nodes、links、options三个响应式数据分别控制节点、连边和整体配置。数据直接以import方式读取 JSON这意味着替换数据源后无需改任何加载代码。2. 可视化选项 options可读性设计computed: { options() { return { force: 3000, // 力导向布局的强度 size: { w: 600, h: 600 }, // 画布尺寸 offset: { x: 0, y: 0 }, // 画布偏移 nodeLabels: true, // 显示节点标签 linkLabels: true, // 显示连边标签 canvas: this.canvas, // 是否使用 canvas 渲染默认 falseSVG }; }, },这些配置直接对应第 13 课可读性章节的要求标签labels让读者知道每个点是谁、每条边代表什么尺寸与力导向强度决定图是否拥挤、是否易于拖拽观察。作业要求产出的应用令人印象深刻调整force、size以及下文的自定义颜色就是最基本的观感优化手段。3. 节点生成逻辑created 钩子组件在created()钩子中完成节点构建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数组是节点清单也是把字符串人名映射为数字索引id的对照表节点样式使用_size和_color两个下划线前缀属性vue-d3-network的约定_size由getCount()计算——它统计这个人收到了多少封信letters[i].to name的计数收件越多节点越大天然突出社交网络中的核心人物_color则是随机十六进制颜色。需要留意的是从letters.json的实际内容看部分记录的人名与characters列表并非完全逐字对应例如第 1 封信的发件人为 Cécile de Volanges而列表中是 Cécile Volanges。在补全连边逻辑使用严格相等比较时这类记录不会被匹配成边——这是替换为你自己的数据时需要注意的一个小陷阱确保 JSON 中的人名与characters数组完全一致。关键一步补全 createLinks() 连边逻辑这是作业文档与课程 README 中明确要求完成的核心代码。createLinks(characters)的职责是遍历letters.json把每条记录的from/to人名翻译成characters数组的下标然后以{ sid: f, tid: t }source id / target id形式推入links数组供vue-d3-network消费。完整实现solution/src/components/Nodes.vue 中即为成品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每条信件生成一条边内层循环遍历characters节点清单用把letters[i].from匹配到下标f、把letters[i].to匹配到下标t每轮内层循环结束后this.links.push({ sid: f, tid: t })记录一条从节点f指向节点t的有向边。需要说明的是f和t在外层循环开头只初始化一次let f 0; let t 0;若某封信的发件人/收件人不在characters列表中会沿用上一次的值——这就是前面提到人名必须完全一致的重要原因。完成这一步后在终端运行npm run serve就能看到节点与连线在画布上随力导向算法铺开并支持拖拽。运行与验证从安装到构建按照 starter/README.md 的说明操作顺序为# 1. 安装依赖确保 Node 20.0.0且已安装 npm npm install # 2. 本地开发支持热重载 npm run serve # 3. 生产构建输出 dist/供静态部署 npm run build # 4. 代码检查 npm run lint验证要点npm run serve启动后浏览器打开本地地址应看到人物节点随机散布、力导向布局自动平衡、节点可被拖拽节点大小体现收信数量差异npm run build成功后产物在dist/目录整个应用是纯静态资源HTML/JS/CSS可以直接作为静态 Web 应用发布——作业评估标准中尝试将其作为静态 Web 应用部署指的就是这一步把dist/目录托管到任意静态站点服务即可。定制你自己的社交网络三步数据迁移把模板改造成你的社交网络只需三步替换数据文件新建/改写src/assets/letters.json保留from/to字段结构填入你自己的互动记录社交媒体消息、家庭关系、项目协作等更新节点清单把Nodes.vue中created()里的characters数组替换为你的数据中出现过的全部人名/节点名确保与 JSON 中的拼写完全一致微调呈现force布局疏密、size画布尺寸、_size的计算口径例如统计双向互动总数而非仅收件数、_color换成有语义的颜色都可以按需调整。如果你希望进一步贴合第 13 课的知识点还可以在定制时做这些增强避免欺骗性呈现网络图中节点大小必须与真实数量成比例不要人为夸大某一节点的地位颜色语义第 13 课强调颜色会传达含义如红色代表权力、蓝色代表信任可把自己/核心人物用高对比色标出同时考虑色盲用户的可读性可读性标签、图例、悬停提示tooltip都是第 13 课Styling your charts for readability明确提到的增强项Vue 项目中可在此基础上补充节点 hover 信息面板。作业评估标准解读作业文档给出了明确的评估量表这是自测的黄金标准优秀Excellent合格Acceptable需改进Needs Improvement提交的 GitHub 仓库包含可正常运行的代码并尝试作为静态 Web 应用发布且带有注释完善的 README说明项目仓库无法正常运行或文档化不佳仓库无法正常运行且文档化不佳据此自检清单npm install与npm run serve在全新环境可复现npm run build成功产出dist/静态部署后功能完好README 写清项目背景、数据来源、运行命令与可视化含义可视化能回答我的社交网络里谁最重要/谁和谁关系最密这类真实问题。小结本作业以极小的代码改动成本让你完整经历定义关系数据 → 构建节点 → 补全连边 → 交互式可视化 → 静态部署的端到端流程。核心工程点在于理解vue-d3-network对nodes含_size/_color与links{ sid, tid }的数据约定并正确实现人名到索引的映射。在此基础上替换你自己的数据即可获得一个真正独特的社交网络可视化应用这也正是第 13 课创建有意义且富有创意的可视化这一终极目标的落地实践。【免费下载链接】Data-Science-For-Beginners10 Weeks, 20 Lessons, Data Science for All!项目地址: https://gitcode.com/GitHub_Trending/da/Data-Science-For-Beginners创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 用 vue-d3-network 构建自定义社交网络可视化：Data-Science-For-Beginners 第 13 课实战
用 vue-d3-network 构建自定义社交网络可视化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 课Making Meaningful Visualizations的课后作业展开作业要求你复用本仓库提供的前端模板项目Vue.js D3 网络可视化库vue-d3-network把自己真实的社会关系数据社交平台互动、家庭成员等转换成交互式社交网络图并发布为可运行的 Web 应用。读完本文你将掌握starter项目的目录结构与数据模型、补全createLinks()连边逻辑的完整方法、npm脚本的运行与构建流程以及如何替换数据源、按评估标准打磨并部署一个属于你自己的自定义可视化应用。上图是模板项目完成后的效果《危险关系》Les Liaisons Dangereuses这部 1782 年的书信体小说中每个人物是一个节点每封信是一条边节点可以被拖拽、数据实时重排从而直观发现叙事中的关键人物。作业的核心就是把这套机制迁移到你自己的数据上。作业目标从模板出发构建你自己的社交网络作业原文关联作业文档给出的核心要求是使用本项目中的代码模板创建社交网络模拟你自己的社交互动数据。你可以绘制自己的社交媒体使用地图也可以创建一张展示家庭成员关系的图表最终产出一个令人印象深刻的 Web 应用展示独特的社交网络可视化。结合第 13 课正文课程 README可知这堂课的完整知识链路是选择正确的图表类型 → 避免欺骗性图表 → 正确处理颜色 → 为可读性做样式设计 → 动画与 3D 展示 → 最终动手做一个有创意的可视化。而本作业恰好落在最后一环把网络关系这种常见但难以用普通柱状图、饼图表达的数据用节点-连线图呈现。按课程给出的图表选型表展示关系relationships应使用 Scatter、Line、Facet、Dual Line 等图形而人物/实体之间的关系网络则更适合本文所用的 D3 力导向网络图。模板项目结构需要改动的地方很少作业基于starter模板starter 目录其结构如下starter/ ├── public/ │ ├── favicon.ico │ └── index.html ├── src/ │ ├── assets/ │ │ └── letters.json # 关系数据原为小说信件 │ ├── components/ │ │ └── Nodes.vue # 可视化核心组件需要你补全 │ ├── App.vue # 根组件仅挂载 Nodes / │ └── main.js # Vue 应用入口 ├── package.json ├── babel.config.js └── package-lock.json其中 App.vue 只负责渲染Nodes /组件main.js 是入口采用new Vue({ render: h h(App) }).$mount(#app)的方式把应用挂载到#app上。你真正需要动脑的只有两个文件Nodes.vue逻辑和letters.json数据。环境与依赖要求starter/package.json 中明确了运行前提Node.js 20.0.0engines字段声明核心依赖vue^3.5.16、vue-d3-network固定版本 0.1.28、core-js^3.6.5开发依赖为 Vue CLI 5 系列vue/cli-service等三个 npm 脚本npm run serve本地开发热重载npm run build编译并压缩生产产物输出到dist/npm run lint代码检查与自动修复。数据模型把关系变成 JSON模板的关系数据存放在 starter/src/assets/letters.json共 1200 条记录每条记录的结构如下{ 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两个字段一条记录 一条有向边。因此当你要构建自己的社交网络时只需把letters.json替换为具有相同from/to结构的 JSON 即可例如社交互动{ from: 我, to: 好友A }表示我主动联系过好友 A家庭关系{ from: 父亲, to: 我 }表示血缘/抚养方向的连接邮件往来、Git 提交者与代码评审者、会议参与者……凡是谁与谁有关系的数据都适用。核心实现理解 Nodes.vue 的三个关键部分starter/src/components/Nodes.vue 是可视化的心脏它由三块组成。1. 模板与组件注册template div classhello d3-network :net-nodesnodes :net-linkslinks :optionsoptions / /div /template script import D3Network from vue-d3-network; import letters from ../assets/letters.json;模板通过vue-d3-network提供的d3-network组件渲染网络图nodes、links、options三个响应式数据分别控制节点、连边和整体配置。数据直接以import方式读取 JSON这意味着替换数据源后无需改任何加载代码。2. 可视化选项 options可读性设计computed: { options() { return { force: 3000, // 力导向布局的强度 size: { w: 600, h: 600 }, // 画布尺寸 offset: { x: 0, y: 0 }, // 画布偏移 nodeLabels: true, // 显示节点标签 linkLabels: true, // 显示连边标签 canvas: this.canvas, // 是否使用 canvas 渲染默认 falseSVG }; }, },这些配置直接对应第 13 课可读性章节的要求标签labels让读者知道每个点是谁、每条边代表什么尺寸与力导向强度决定图是否拥挤、是否易于拖拽观察。作业要求产出的应用令人印象深刻调整force、size以及下文的自定义颜色就是最基本的观感优化手段。3. 节点生成逻辑created 钩子组件在created()钩子中完成节点构建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数组是节点清单也是把字符串人名映射为数字索引id的对照表节点样式使用_size和_color两个下划线前缀属性vue-d3-network的约定_size由getCount()计算——它统计这个人收到了多少封信letters[i].to name的计数收件越多节点越大天然突出社交网络中的核心人物_color则是随机十六进制颜色。需要留意的是从letters.json的实际内容看部分记录的人名与characters列表并非完全逐字对应例如第 1 封信的发件人为 Cécile de Volanges而列表中是 Cécile Volanges。在补全连边逻辑使用严格相等比较时这类记录不会被匹配成边——这是替换为你自己的数据时需要注意的一个小陷阱确保 JSON 中的人名与characters数组完全一致。关键一步补全 createLinks() 连边逻辑这是作业文档与课程 README 中明确要求完成的核心代码。createLinks(characters)的职责是遍历letters.json把每条记录的from/to人名翻译成characters数组的下标然后以{ sid: f, tid: t }source id / target id形式推入links数组供vue-d3-network消费。完整实现solution/src/components/Nodes.vue 中即为成品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每条信件生成一条边内层循环遍历characters节点清单用把letters[i].from匹配到下标f、把letters[i].to匹配到下标t每轮内层循环结束后this.links.push({ sid: f, tid: t })记录一条从节点f指向节点t的有向边。需要说明的是f和t在外层循环开头只初始化一次let f 0; let t 0;若某封信的发件人/收件人不在characters列表中会沿用上一次的值——这就是前面提到人名必须完全一致的重要原因。完成这一步后在终端运行npm run serve就能看到节点与连线在画布上随力导向算法铺开并支持拖拽。运行与验证从安装到构建按照 starter/README.md 的说明操作顺序为# 1. 安装依赖确保 Node 20.0.0且已安装 npm npm install # 2. 本地开发支持热重载 npm run serve # 3. 生产构建输出 dist/供静态部署 npm run build # 4. 代码检查 npm run lint验证要点npm run serve启动后浏览器打开本地地址应看到人物节点随机散布、力导向布局自动平衡、节点可被拖拽节点大小体现收信数量差异npm run build成功后产物在dist/目录整个应用是纯静态资源HTML/JS/CSS可以直接作为静态 Web 应用发布——作业评估标准中尝试将其作为静态 Web 应用部署指的就是这一步把dist/目录托管到任意静态站点服务即可。定制你自己的社交网络三步数据迁移把模板改造成你的社交网络只需三步替换数据文件新建/改写src/assets/letters.json保留from/to字段结构填入你自己的互动记录社交媒体消息、家庭关系、项目协作等更新节点清单把Nodes.vue中created()里的characters数组替换为你的数据中出现过的全部人名/节点名确保与 JSON 中的拼写完全一致微调呈现force布局疏密、size画布尺寸、_size的计算口径例如统计双向互动总数而非仅收件数、_color换成有语义的颜色都可以按需调整。如果你希望进一步贴合第 13 课的知识点还可以在定制时做这些增强避免欺骗性呈现网络图中节点大小必须与真实数量成比例不要人为夸大某一节点的地位颜色语义第 13 课强调颜色会传达含义如红色代表权力、蓝色代表信任可把自己/核心人物用高对比色标出同时考虑色盲用户的可读性可读性标签、图例、悬停提示tooltip都是第 13 课Styling your charts for readability明确提到的增强项Vue 项目中可在此基础上补充节点 hover 信息面板。作业评估标准解读作业文档给出了明确的评估量表这是自测的黄金标准优秀Excellent合格Acceptable需改进Needs Improvement提交的 GitHub 仓库包含可正常运行的代码并尝试作为静态 Web 应用发布且带有注释完善的 README说明项目仓库无法正常运行或文档化不佳仓库无法正常运行且文档化不佳据此自检清单npm install与npm run serve在全新环境可复现npm run build成功产出dist/静态部署后功能完好README 写清项目背景、数据来源、运行命令与可视化含义可视化能回答我的社交网络里谁最重要/谁和谁关系最密这类真实问题。小结本作业以极小的代码改动成本让你完整经历定义关系数据 → 构建节点 → 补全连边 → 交互式可视化 → 静态部署的端到端流程。核心工程点在于理解vue-d3-network对nodes含_size/_color与links{ sid, tid }的数据约定并正确实现人名到索引的映射。在此基础上替换你自己的数据即可获得一个真正独特的社交网络可视化应用这也正是第 13 课创建有意义且富有创意的可视化这一终极目标的落地实践。【免费下载链接】Data-Science-For-Beginners10 Weeks, 20 Lessons, Data Science for All!项目地址: https://gitcode.com/GitHub_Trending/da/Data-Science-For-Beginners创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考