D3.js是一个开源JavaScript库，用于-

• 数据驱动的文档对象模型（DOM）操纵。
• 处理数据和形状。
• 布置用于线性，分层，网络和地理数据的可视元素。
• 启用用户界面（UI）状态之间的平滑过渡。
• 启用有效的用户交互。

网络标准

在开始使用D3.js创建可视化之前，我们需要熟悉Web标准。以下Web标准在D3.js中大量使用。

• 超文本标记语言（HTML）
• 文档对象模型（DOM）
• 级联样式表（CSS）
• 可缩放矢量图形（SVG）
• 的JavaScript

让我们详细地逐一遍历每种Web标准。

超文本标记语言（HTML）

众所周知，HTML用于构造网页的内容。它存储在扩展名为“ .html”的文本文件中。

示例-一个典型的准HTML示例如下所示

文档对象模型（DOM）

当浏览器加载HTML页面时，它将转换为分层结构。 HTML中的每个标签都将转换为具有父子层次结构的DOM中的元素/对象。它使我们的HTML更具逻辑性。形成DOM后，就可以更轻松地操作（添加/修改/删除）页面上的元素。

让我们使用以下HTML文档了解DOM-

   

   
      

         
Greeting
         
Hello World!
      
   

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

级联样式表（CSS）

HTML提供了网页的结构，而CSS样式使网页看起来更令人愉悦。 CSS是一种样式表语言，用于描述以HTML或XML（包括SVG或XHTML之类的XML方言）编写的文档的表示形式。 CSS描述了如何在网页上呈现元素。

可缩放矢量图形（SVG）

SVG是一种在网页上呈现图像的方法。 SVG不是直接图像，而只是使用文本创建图像的一种方式。顾名思义，它是可伸缩向量。它会根据浏览器的大小自行缩放，因此调整浏览器的大小不会使图像变形。除IE 8及更低版本外，所有浏览器均支持SVG。数据可视化是可视化表示，使用SVG通过D3.js呈现可视化非常方便。

将SVG视为可以在其上绘制不同形状的画布。首先，让我们创建一个SVG标签-

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

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

就像样式HTML元素一样，样式SVG元素也很简单。让我们将矩形的背景色设置为黄色。为此，我们需要添加一个属性“ fill”，并将值指定为黄色，如下所示-

的JavaScript

JavaScript是一种松散类型的客户端脚本语言，可在用户的浏览器中执行。 JavaScript与HTML元素（DOM元素）进行交互，以使Web用户界面具有交互性。 JavaScript实现了ECMAScript标准，该标准包括基于ECMA-262规范的核心功能以及不基于ECMAScript标准的其他功能。 JavaScript知识是D3.js的先决条件。