【D3.js in Action 3 精译】D3 入门基础之 Node、JavaScript 框架与 Observable 记事本

当前内容所在位置

  • 第一部分 D3.js 基础知识
    • 第一章 D3.js 简介
      • 1.1 何为 D3.js?
      • 1.2 D3 生态系统——入门须知
        • 1.2.1 HTML 与 DOM
        • 1.2.2 SVG - 可缩放矢量图形
        • 1.2.3 Canvas 与 WebGL
        • 1.2.4 CSS
        • 1.2.5 JavaScript
        • 1.2.6 Node 与 JavaScript 框架 ✔️
        • 1.2.7 Observable 记事本 ✔️
      • 1.3 数据可视化最佳实践(精译中 ⏳)

1.2.6 Node 与 JavaScript 框架

JavaScript 在过去十年中经历了重大变化。现代 JavaScript 最重要的两个趋势是 Node.js 的兴起以及 JavaScript 框架成为大多数项目构建的标准。

对于 D3 项目,需要重点关注的 Node 技术是 Node Package Manager(即 NPMNode.js 的包管理工具)。NPM 可以安装“模块”(modules)或 JavaScript 的第三方小型库以供项目使用,而不必在 <script> 标签中引用大量独立的 JS 文件;即便模块不是作为一个整体结构来构建的,使用模块也可以减少应用的代码量。

2021 年年中发布的 D3.js 第 7 版提供了模块导入功能。本书将以两种方式演示 D3 示例:其一是像第 2 章那样加载整个 D3 库;其二是像后续示例那样,仅包含项目所需的部分 D3 模块。我们可以通过 script 标签来使用 D3,但从第 2 小节开始,本书将使用 NPM 来导入 D3 模块——这是当前的标准做法。若要开发专业的 D3 项目,就必须熟悉这种方式。

如果参与过专业的 Web 项目开发,那么您很有可能正与某款 JavaScript 框架打交道,如 ReactAngularVueSvelte。这些框架为开发人员构建模块化、可重用及可测试的 Web 项目提供了坚实基础。它们负责构建与更新 DOM——这也是 D3 的核心工作。后续第 8 章还会介绍在 JavaScript 框架内构建 D3 可视化项目时如何避免冲突的相关策略。

最后,在专业工作环境中,您可能会将 D3 与 TypeScript 结合使用。TypeScript 是 JavaScript 的语法超集,可以增强项目的可扩展性以及代码的可维护性。虽然本书不会详细讨论 TypeScript,但 D3 方法的类型可以通过 NPM 包 @types/d3(详见 www.npmjs.com/package/@types/d3)来安装。本书第 8 章还将在 Angular 项目中使用这些类型。

1.2.7 Observable 记事本

如果在网上搜索 D3 项目的示例,必然会看到 Observable 记事本(https://observablehq.com)相关的资源。Observable 是一款针对数据科学和可视化的协同训练营产品,类似于 Python 的 Jupyter NotebookObservable 平台由 Mike Bostock 创建,取代了之前的 D3 线上沙箱项目 blocks。目前 D3 所有的官方示例都在 Observable 上运行,上面的 D3 社区也相当活跃。

值得注意的是,Observable 要求开发者掌握一种该平台特有的方式来处理 D3 项目;并且上面的内容也不能直接复制粘贴到其他前端开发环境中(尽管 Observable 的 2.0 版本简化了相关流程)。鉴于本书的重点在于构建能部署到前端生产环境中的 D3 可视化项目,因此与 Observable 相关的知识将不作介绍。如果您对 Observable 感兴趣,可参考其官方公布的系列教程。本书介绍的绝大部分技术和概念都可以转化为 Observable 记事本的相应内容。

译注
至此,D3 入门需要掌握的核心基础知识就全部介绍完了。对照文章开头的章节目录不难看出,全新第三版以实战为重点,介绍了大量与 D3 可视化项目相关的内容,尤其是 SVG 绘图基础和原生 JavaScript 语法方面的知识。正如书中所述,实际开发环境中 D3 与 TypeScript 也联系紧密,这一点需要各位 D3 爱好者高度重视。另外,由于大量优秀的 D3 项目示例都是在 Observable 平台进行演示的,后续会根据情况将书中部分案例迁移到 Observable,以飨广大 D3 爱好者。敬请期待!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/44143.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

全网最简单的Java设计模式【六】Java单例模式 懒汉式详解

Java单例模式 懒汉式详解 【创作】 不易&#xff0c;【点赞】 是情义&#xff0c;【关注】 是动力&#xff0c;【收藏】 是回忆。 示例代码地址&#xff1a;https://gitee.com/code-in-java/csdn-blog.git 一、概念与原理 Java中的单例模式是一种确保一个类只有一个实例&#…

人形机器人头部结构设计

我又回来啦&#xff01;电机部分的教程会继续更新咯~ 前几天做了成图增材赛道&#xff0c;也算4个月以来本人做过最复杂的结构项目。 不知结果会怎么样&#xff0c;但我也尽全力啦&#xff01; 把说明书发在这里&#xff0c;STL已发GitHub&#xff0c;链接&#xff1a; zysampo…

使用公网服务器作为跳板的SSH隧道:常见应用场景

文章目录 使用公网服务器作为跳板的SSH隧道:常见应用场景什么是SSH隧道?使用公网服务器作为跳板的优势常见应用场景1. 远程桌面访问2. 访问内网服务3. 安全文件传输如何设置SSH隧道总结使用公网服务器作为跳板的SSH隧道:常见应用场景 在现代网络环境中,SSH(Secure Shell)…

如何视频提取字幕?推荐5款视频字幕提取软件

#7月份我的同事一个个消失了#&#xff0c;这不仅是一个话题标签&#xff0c;更是许多公司面临的现实写照。 在人手紧缺的夏日&#xff0c;如何提高工作效率成为当务之急。特别是对于需要处理视频内容的团队&#xff0c;一款能够快速提取字幕的软件显得尤为重要。 下面&#x…

揭秘小红书矩阵系统:源码助力一键自动发布,多平台管理,效率飙升!

在数字化时代&#xff0c;社交媒体已成为品牌和个人展示自我、推广产品的重要舞台。小红书&#xff0c;作为备受年轻人喜爱的社交平台&#xff0c;其影响力不容小觑。然而&#xff0c;面对日益激烈的竞争&#xff0c;如何高效地在小红书上发布内容、管理多平台账号&#xff0c;…

纯技术分享:淘宝商品详情原数据接口参数解析

item_get_app-获得淘宝app商品详情原数据 公共参数 名称类型必须描述keyString是调用key&#xff08;必须以GET方式拼接在URL中&#xff09;secretString是调用密钥api_nameString是API接口名称&#xff08;包括在请求地址中&#xff09;[item_search,item_get,item_search_s…

【JavaEE】Spring AOP详解

一.AOP的定义. Aspect Oriented Programming&#xff08;面向切面编程&#xff09;概括的来说AOP是一种思想, 是对某一类事情的集中处理 什么是面向切面编程呢? 切面就是指某一类特定问题, 所以AOP也可以理解为面向特定方法编程.什么是面向特定方法编程呢? 比如上个博客文章…

百度搜索框制作HTML+CSS

样品图 自制效果图&#xff08;附注释&#xff09; <!DOCTYPE html> <html lang"en"><head><!-- 定义文档的字符编码为UTF-8&#xff0c;以支持中文等多语言字符 --><meta charset"UTF-8" /><!-- 设置页面在不同设备上的…

掌握Perl命令行:深入解析命令行参数的艺术

&#x1f680; 掌握Perl命令行&#xff1a;深入解析命令行参数的艺术 在Perl编程中&#xff0c;命令行参数是与外部交互的重要方式之一。无论是执行脚本时的选项设置&#xff0c;还是传递必要的运行时数据&#xff0c;命令行参数都扮演着至关重要的角色。本文将带您深入了解如…

不容错过!手把手教你开启微信通话自动录音功能!(含手机端和电脑端)

文章目录 📖 介绍 📖🏡 演示环境 🏡📒 微信自动录音 📒📝 方法一📝 方法二📝 电脑端自动录音📝 注意事项⚓️ 相关链接 ⚓️📖 介绍 📖 在商务沟通或重要对话中,通话录音功能可以帮助我们记录关键信息,避免遗漏,同时也是证据保存的一种手段。虽然微…

IPXProxy海外代理IP在MultiLogin指纹浏览器中的配置教程

Multilogin指纹浏览器是一款付费浏览器&#xff0c;它为用户提供了拥有多个虚拟浏览器配置文件的机会。作为最好的指纹浏览器之一&#xff0c;它常常被用来创建或管理多个账户&#xff0c;当然在这个过程&#xff0c;代理IP是不可或缺的一部分。下面给大家代理在MultiLogin指纹…

api文字识别智能录入、身份证识别、接口识别​

OCR技术和由此带来的文字识别自动化程度不断增加&#xff0c;不少人预计该技术将对相当一部分的行业、工作产生影响&#xff0c;其中有一部分是颠覆性的。比如文字录入的工作&#xff0c;现在不少企业为自己的系统、产品集成了OCR技术核心&#xff0c;不仅能够减少人工录入的压…

AI能耗短期不会造成电力短缺,算力能效长期改进空间巨大

人工智能&#xff08;AI&#xff09;的快速发展正引发其对能源消耗的普遍担忧。国际能源署&#xff08;IEA&#xff09;在2024年的报告中预测&#xff0c;由于AI和加密货币的增长&#xff0c;全球数据中心的用电量将在未来几年内翻倍。2022年&#xff0c;全球数据中心的用电量约…

WPF界面设计-更改按钮样式 自定义字体图标

一、下载图标文件 iconfont-阿里巴巴矢量图标库 二、xaml界面代码编辑 文件结构 &#xe653; 对应的图标代码 Fonts/#iconfont 对应文件位置 <Window.Resources><ControlTemplate TargetType"Button" x:Key"CloseButtonTemplate"…

将Hyper-V虚拟机与主机共享网络

Hyper-V 网络设置 目标 将Hyper-V虚拟机网络配置为与主机使用同一网络&#xff0c;并确保主机网络连接不受影响。 前提条件 主机上已安装Hyper-V已创建Hyper-V虚拟机 步骤 1. 配置主机网络共享 打开 控制面板 -> 网络和 Internet -> 网络连接。右键点击 WIAN,选择…

IMX6ULL linux4.x RS485配置

文章目录 IMX6ULL linux4.x RS485配置使用IMX6ULL硬件流控设备树 使用普通IO口做软件流控串口驱动补丁设备树 rs485测试程序使用效果 IMX6ULL linux4.x RS485配置 使用IMX6ULL硬件流控 设备树 pinctrl_485r1: 485r1grp {fsl,pins <MX6UL_PAD_UART2_TX_DATA__UART2_DCE_T…

【鸿蒙学习笔记】UIAbility组件概述

官方文档&#xff1a;UIAbility组件 目录标题 UIAbility组件概述 [Q&A] 什么是UIAbility&#xff1f;声明周期UIAbility组件-启动模式UIAbility组件-与UI的数据同步 UIAbility组件概述 [Q&A] 什么是UIAbility&#xff1f; UIAbility组件是一种包含UI界面的应用组件&a…

防火墙组网

一、实验拓扑图 二、实验要求 1、DMZ区内的服务器&#xff0c;办公区仅能在办公时间内&#xff08;9&#xff1a;00-18&#xff1a;00&#xff09;可以访问&#xff0c; 生产区的设备全天可以访问。 2、生产区不允许访问互联网&#xff0c;办公区和游客区允许访问互联网。 3、办…

PIP 换源:提升 Python 包安装速度的秘诀

一、引言 在使用 Python 进行开发时&#xff0c;我们经常需要通过 pip 命令安装各种库和依赖。然而&#xff0c;默认的源可能会因为网络原因导致下载速度缓慢&#xff0c;影响开发效率。这时候&#xff0c;换源就成为了一个非常实用的技巧。 二、为什么要换源&#xff1f; 提…

等保测评的创新与学习

等保测评的创新与学习 等保测评&#xff0c;即信息安全等级保护测评&#xff0c;是中国网络安全保障体系的核心组成部分。随着技术的发展和网络安全威胁的日益复杂&#xff0c;等保测评也在不断创新和学习&#xff0c;以适应新的安全需求。 创新实践 智能化测评工具的应用&…