Categories
D3.js教程

D3.js-概念

D3.js-概念


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

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

网络标准

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

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

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

超文本标记语言(HTML)

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

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

<meta charset="UTF-8">
      <title></title>
   

   
   

文档对象模型(DOM)

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

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

<title>My Document</title>
   

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

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

文件对象模型

级联样式表(CSS)

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

可缩放矢量图形(SVG)

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

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

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

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

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

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

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

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

的JavaScript

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

error: 内容受到保护 !!