d3.js学习笔记①创建html文档

news2024/11/28 14:51:55

本人之前从未学过HTML、CSS、JavaScript,然而我导是做前端的,要求我必须在三周内掌握d3.js,我只能从0学起并以此记录自己的学习过程。

首先对这三种语言有一个初步的认识:HTML是用于搭建网页框架,CSS是美化网页的,JavaScript用于编写网页内容。而d3.js是JavaScript里面的一个库,主要用于数据可视化。

然后要知道在哪写js代码。主要有两种方式:

记事本

第一种方式是用记事本来写。新建一个文本文档,将后缀改成html即可。
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
双击图标即可打开网页。
【右键】-【打开方式】-【记事本】,即可在记事本里编写代码。

vsCode

第二种方式是用vsCode来写。强烈推荐这种方式,vsCode自带一些快捷键,写起来更加方便。vsCode下载、安装、配置可以参考这篇文章: vsCode配置。
VsCode有许多快捷键,我最常用的两个如下:
英文输入法【!】+【enter】生成HTML基本格式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

【shift】+【alt】+【F】代码格式化,即自动对齐、缩进。

可以直接在HTML文档中写js代码。在body里面添加script标签,即可在里面进行编程。

<body>
    <script>
        console.log('Hello, world!')
    </script>
</body>

Console.log()函数相当于python的print函数,非常有用。
打开该网页,快捷键【F12】打开【开发者工具】,即可看到这行代码。
在这里插入图片描述
若要使用d3.js,还需要引用d3的库文件。可以直接通过网络引用(须保持网络通畅),在head标签里加入最后这行代码:

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script src="http://d3js.org/d3.v5.min.js" charset="utf-8"></script>
    
</head>

我看的许多教材里用到的版本是v3,现在已经更新到v5,但v3也能使用。

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

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

相关文章

软件设计师考试——计算机网络、系统安全分析和设计部分

计算机网路 七层模型 OSI/RM七层模型 网络技术标准与协议 TCP协议 DHCP协议 DNS协议 计算机网络的分类——拓扑结构 按分布范围&#xff1a; 局域网城域网广域网因特网 按拓扑结构&#xff1a; 总线型星型环型 网络规划与设计 逻辑网络设计 物理网络设计 分层设计 IP地址…

VirboxLM-免服务版授权码,快速实现一机一码

一、产品介绍 ​ 授权码是由深盾科技开发的一款软件保护及授权管理产品 ​&#xff0c;一方面要保护软件代码不被逆向&#xff0c;另一方面要控制软件的授权使用。软件用户只需要输入授权码&#xff08;由数字和字母组成的一串字符&#xff09;&#xff0c;激活授权码后即可使…

这年头,谁还在「贩卖」生活方式?

【潮汐商业评论/原创】 “我已经很久没有追寻过品牌购物了”Anna如是说。 如今的Anna对商品的选择往往会考虑性价比以及简洁的外观&#xff0c;去品牌化、简单已经成为其新的生活方式。 日本作者三浦展在《第四消费时代》一书中提到&#xff0c;在第三消费社会&#xff0c;新…

Java版本企业工程项目管理系统平台源码(三控:进度组织、质量安全、预算资金成本、二平台:招采、设计管理)

工程项目管理软件&#xff08;工程项目管理系统&#xff09;对建设工程项目管理组织建设、项目策划决策、规划设计、施工建设到竣工交付、总结评估、运维运营&#xff0c;全过程、全方位的对项目进行综合管理 工程项目各模块及其功能点清单 一、系统管理 1、数据字典&#…

Android 获取奔溃crash的日志(adb logcat或者dropbox)

1.通过adb logcat 来获取&#xff1a; 使用场景&#xff1a;测试或者开发小伙伴 抓取。 先执行adb logcat -c 清理缓存日志 接着&#xff0c;抓取当前时间段开始的日志: adb logcat -v time >D:/crash.log 也可以抓取指定进程的日志&#xff1a; adb logcat -v time | fi…

利用POSIX多线程API函数进行多线程开发

本书文字内容源自 <<linux C/C服务器开发实践>> 支持正版图书&#xff0c;测试代码根据测试目的&#xff0c;可自行修改测试。 前言 在用POSIX多线程API函数进行开发之前&#xff0c;我们首先要熟悉这些API函数。常见的与线程有关的基本API函数见下表 使用这些A…

亚马逊云科技综合解决方案助力美的智能化,成本节省30%

很多人都有和客服打交道的体验&#xff0c;而这种体验大概率不佳&#xff0c;人工客服迟迟不应&#xff0c;解答问题也不精准&#xff0c;糟糕的客服体验对于面向消费者的企业来说亦是一大难题&#xff0c;严重者甚至会导致客户流失、评价滑坡等后果&#xff0c;作为知名科技电…

FileInputStream.read和FileChannel.read的区别

FileChannel怎么来的 FileChannel channel new FileInputStream("").getChannel() FileChannel的read()方法 channel.read(byteBuffer) 实现类FileChannelImpl 首先映入眼帘的就是非常熟悉的synchronized关键字&#xff0c; private final Object positionLock ne…

宏基因组组装 | 就现在!做出改变!!

微生态研究的核心难点是什么&#xff01; 基因组组装&#xff01; 从宏基因组数据中组装获得细菌的完整基因组&#xff08;complete MAGs&#xff09;是微生物组研究的长期目标&#xff0c;但基于NGS的宏基因组测序和组装方法是无法实现完整的细菌基因组组装的。即便是红极一…

appium-app测试-环境搭建手机和adb设置

1、手机设置&#xff08;Android手机-readMI k50&#xff09;&#xff1a; 1.1开发者模式设置 入口&#xff1a;设置–我的设备–全部参数与信息&#xff1b; 连续点击MIUI版本7下&#xff0c;进入开发者模式 1.2、开发者选项设置 入口&#xff1a;设置–更多设置–开发者选项…

np.convolve(x,h, mode=‘##‘)的使用

用法&#xff1a; np.convolve(a,v,mode) a代表卷积数据&#xff0c;v卷积核大小&#xff0c;mode卷积方式&#xff0c;mode卷积方式有三种 same full valid mode可能的三种取值情况&#xff1a; full’ 默认值&#xff0c;返回每一个卷积值&#xff0c;长度是NM-1,在卷积的…

MyBatis:使用 MyBatis 实现增删改查、各种配置解析

文章目录 MyBatis&#xff1a;Day 01一、简介二、第一个 MyBatis 程序1. 步骤2. 注意 三、增、删、改、查四、扩展1. Map2. 模糊查询 五、配置解析&#xff08;参考手册&#xff09;1. 环境配置&#xff1a;environments2. 属性优化&#xff1a;properties3. 类型别名&#xff…

中国厨房更净一步:一场科技“下凡”带来的方太式浪漫

世界上恐怕没有任何一个民族&#xff0c;比中国人对美食的情结更悠远了。 正如《菜根谭》里说的&#xff0c;“醲肥辛甘非真味&#xff0c;真味只是淡&#xff1b;神奇卓异非至人&#xff0c;至人只是常”。 寻常人家的一蔬一饭&#xff0c;是厨房里的幸福记忆&#xff0c;也承…

大数据分析案例-基于朴素贝叶斯算法构建微博谣言检测模型

&#x1f935;‍♂️ 个人主页&#xff1a;艾派森的个人主页 ✍&#x1f3fb;作者简介&#xff1a;Python学习者 &#x1f40b; 希望大家多多支持&#xff0c;我们一起进步&#xff01;&#x1f604; 如果文章对你有帮助的话&#xff0c; 欢迎评论 &#x1f4ac;点赞&#x1f4…

干货!ICLR 2023 | 更稳定高效的因果发现方法-自适应加权

点击蓝字 关注我们 AI TIME欢迎每一位AI爱好者的加入&#xff01; ╱ 个人简介╱ 张岸 新加坡国立大学NExT实验室博士后&#xff0c;主要研究Robust & Trustable AI。 个人主页&#xff1a;https://anzhang314.github.io/ 01 内容简介 可微分的因果发现方法&#xff0c;是从…

文件管理系统【GUI/Swing+MySQL】(Java课设)

系统类型 Swing窗口类型Mysql数据库存储数据 使用范围 适合作为Java课设&#xff01;&#xff01;&#xff01; 部署环境 jdk1.8Mysql8.0Idea或eclipsejdbc 运行效果 本系统源码地址&#xff1a;https://download.csdn.net/download/qq_50954361/87734930 更多系统资源库…

365天深度学习打卡第N1周:Pytorch文本分类入门

&#x1f368; 本文为&#x1f517;365天深度学习训练营 中的学习记录博客&#x1f356; 原作者&#xff1a;K同学啊|接辅导、项目定制 一、背景介绍 本节是一个使用PyTorch实现的简单文本分类实战案例。在这个例子中&#xff0c;我们将使用AG News数据集进行文本分类。 AG Ne…

MIPS整数指令实现浮点运算

OVERVIEW 实现上&#xff0c;我采用了空间换时间和实现复杂度的这么一个tradeoff。把每个部分都用一个word来存&#xff0c;这样读取就只要lw就行了&#xff0c;如果到bit级别的话&#xff0c;可能跨越多个byte或者word&#xff0c;那么 我就需要到内存或者cache里面读取更多次…

零售行业如何进行活动前的准备工作

新钛云服已累计为您分享743篇技术干货 背景 零售行业通常会面临618、双十一、周年庆等活动。在面对这些重要的活动通常会担心资源是否需要扩容&#xff1f;应用能否抗住大并发的请求&#xff1f; 本人曾面对过几千大并发请求和客户这边搞活动出现问题的经验教训。希望能通过这些…

安装多个NodeJS windows上安装多个Nodejs版本 解决vue2/vue3同时运行

第一步下载nvm-windowsnvm-windows 下载地址&#xff1a;Github最新下载地址 进入之后直接下载 第二步 安装NVM 注意路径一定不要包含空格 中文否则会报错 点击安装之后 如果之前安装了nodejs的话会提示 希望nvm管理已安装node 版本吗 点击 是 即可 安装完成后 打开 cmd 输入 n…