Web开发——D3.js教程——相关概念

web王

于 2024-07-05 14:05:09 发布

阅读量1.2k

点赞数 23

文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/weixin_53218076/article/details/140203100

版权

Web标准

昨天发了两篇文章，很多人后台私信我说有一些名词不太懂，今天就解释一下。在我们开始使用D3.js创建可视化之前，我们需要熟悉一些常用的Web标准。

超文本标记语言(HTML)
文档对象模型(DOM)
层叠样式表(CSS)
可缩放矢量图形(SVG)
JavaScript

下面我逐一介绍这些网络标准。

一、超文本标记语言(HTML)

我们都知道HTML用于构建网页的内容。它存储在扩展名为".html"的文本文件中。

典型的简单HTML示例如下所示：

<!DOCTYPE html>
<html lang = "en">
   <head>
      <meta charset = "UTF-8">
      <title></title>
   </head>

   <body>
   </body>
</html>

文档对象模型(DOM)

当浏览器加载HTML页面时，它将被转换为层次结构。HTML中的每个标记都转换为DOM中具有父子层次结构的元素或对象。它使我们的HTML更具逻辑结构。一旦形成DOM，我们就可以更容易地操作(添加/修改/删除)页面上的元素。

我们用以下HTML文档来理解DOM :

<!DOCTYPE html>
<html lang = "en">
   <head>
      <title>My Document</title>
   </head>

   <body>
      <div>
         <h1>Greeting</h1>
         <p>Hello World!</p>
      </div>
   </body>
</html>

这是一个简单的HTML文档，包含一个标题和一个内容部分。在内容部分中，有一个<div>标签，里面包含了一个<h1>标签和一个<p>标签。<h1>标签用来显示标题，这里是"Greeting"；<p>标签用来显示段落文本，这里是"Hello World!"。

这段代码创建了一个包含问候语的简单页面。浏览器会将这些标签解释并呈现为一个包含标题和文本内容的页面。标题栏上会显示文档的标题为"My Document"。

上述HTML文档的文档对象模型如下，

层叠样式表(CSS)

CSS (Cascading Style Sheets，层叠样式表），是一种用来为结构化文档（如 HTML 文档或 XML 应用）添加样式（字体、间距和颜色等）的计算机语言，它描述了如何在网页上呈现元素。

通过使用 CSS 我们可以大大提升网页开发的工作效率。CSS3 现在已被大部分现代浏览器支持，而下一版的 CSS4 仍在开发中。

以下是一段实例。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>我是Web王</title>
<style>
body {
	background-color:#d0e4fe;
}
h1 {
	color:orange;
	text-align:center;
}
p {
	font-family:"Times New Roman";
	font-size:20px;
}
</style>
</head>

<body>

<h1>CSS 实例！</h1>
<p>假装这里有文字</p>

</body>
</html>

效果图如下：

可缩放矢量图形(SVG)

SVG是一种在网页上呈现图像的方法。SVG不是直接图像，而只是使用文本创建图像的一种方式。顾名思义，它是可缩放矢量。它会根据浏览器的大小进行缩放，因此调整浏览器大小不会使图像失真。除IE 8及更低版本外，所有浏览器均支持SVG。数据可视化中使用SVG渲染可视化很方便。

将SVG想象成一个画布，我们可以在其上绘制不同的形状.首先，让我们创建一个SVG标签 :

<svg width = "500" height = "500"></<svg>

SVG的默认测量值是像素，因此我们不需要指定单位是否为像素。现在，如果我们想要绘制一个矩形，我们可以使用下面的代码：

<svg width = "500" height = "500">
   <rect x = "0" y = "0" width = "300" height = "200"></rect>
</svg>

这段SVG代码的作用是创建一个500x500像素的画布，并在画布上绘制一个矩形。矩形的左上角起点坐标是（0,0），宽度为300像素，高度为200像素。

我们可以在SVG中绘制其他形状，例如 : 线条，圆形，椭圆形，文本和路径。

就像样式化HTML元素一样，样式化SVG元素很简单。例如我们想将矩形的背景颜色设置为黄色，只需要添加一个属性"fill"并将值指定为黄色，如下所示 :

<svg width = "500" height = "500">
   <rect x = "0" y = "0" width = "300" height = "200" fill = "yellow"></rect>
</svg>

JavaScript知识是学习D3.js的先决条件。这是一种松散类型的客户端脚本语言，可在用户的浏览器中执行。 JavaScript与HTML元素(DOM元素)交互，以使Web用户界面具有交互性。 JavaScript实现 ECMAScript标准，其中包括基于ECMA-262规范的核心功能以及不基于ECMAScript标准的其他功能。想听我具体讲讲的可以点赞关注评论。下一章我们学习D3.js的核心概念之一：选择。

web王

关注

23
点赞
踩
29

收藏

觉得还不错? 一键收藏
0
评论
Web开发——D3.js教程——相关概念

它使我们的HTML更具逻辑结构。(Cascading Style Sheets，层叠样式表），是一种用来为结构化文档（如 HTML 文档或 XML 应用）添加样式（字体、间距和颜色等）的计算机语言，它描述了如何在网页上呈现元素。这段SVG代码的作用是创建一个500x500像素的画布，并在画布上绘制一个矩形。矩形的左上角起点坐标是（0,0），宽度为300像素，高度为200像素。这是一个简单的HTML文档，包含一个标题和一个内容部分。我们可以在SVG中绘制其他形状，例如 : 线条，圆形，椭圆形，文本和路径。
复制链接

扫一扫