DC.js - D3.js简介

D3.js是一个JavaScript库,用于在浏览器中创建交互式可视化. D3库允许我们在数据集的上下文中操纵网页的元素.这些元素可以是HTML,SVG或Canvas元素,可以根据数据集的内容进行引入,删除或编辑.它是一个用于操作DOM对象的库. D3.js可以成为数据探索的宝贵帮助.它使您可以控制数据的表示,并允许您添加数据交互.

与其他库相比,D3.js是最重要的框架之一.这是因为;它适用于Web和数据可视化,具有企业级.另一个原因是其极大的灵活性,使世界各地的开发人员能够创建许多高级图表.此外,它在很大程度上扩展了它的功能.

让我们了解D3.js的基本概念,如下 :

  • 选择

  • 数据加入

  • SVG

  • 转型

  • 动画

  • D3.js API

让我们了解这些概念中的每一个都是详细的.

选择

选择是D3.js中的核心概念之一.它基于CSS Selector概念.那些已经使用并了解JQuery的人已经可以轻松理解这些选择.它使我们能够基于CSS选择器选择DOM,然后提供修改,追加和删除DOM元素的选项.

数据连接

数据连接是D3.js中的另一个重要概念.它与选择一起使用,使我们能够根据我们的数据集(一系列数值)操作HTML文档.默认情况下,D3.js为数据集提供其方法中的最高优先级,数据集中的每个项目对应一个HTML元素.

SVG

SVG代表可缩放矢量图形. SVG是一种基于XML的矢量图形格式.它提供了绘制不同形状的选项,如直线,矩形,圆形,椭圆等.因此,使用SVG设计可视化为您提供更多的功能和灵活性.

转换

SVG提供了转换单个SVG形状元素或SVG元素组的选项. SVG变换支持翻译,缩放,旋转和偏斜.

过渡

过渡是从一个项目的一个状态更改为另一个状态的过程. D3.js提供了一个transition()方法来在HTML页面中执行转换.

动画

D3.js通过转换支持动画.动画可以通过正确使用过渡来完成.过渡是一种有限形式的关键帧动画,只有两个关键帧:开始结束.起始关键帧通常是DOM的当前状态,而结束关键帧是您指定的一组属性,样式和其他属性.转换非常适合转换到新视图,而不需要依赖于起始视图的复杂代码.

D3.js API

让我们了解一些重要的D3.js API的简要方法.

集合API

集合只是一个将多个元素组合成一个单元的对象.它也被称为容器.它包含对象,地图,集合和嵌套.

路径API

路径用于绘制矩形,圆形,椭圆形,折线,多边形,直线线条和曲线. SVG路径表示可以描边,填充,用作剪切路径或三者的任意组合的形状轮廓.

Axis API

D3.js提供绘制轴的功能.轴由线,刻度和标签组成.轴使用比例,因此每个轴都需要给出一个可以使用的比例.

缩放API

缩放有助于扩展内容.您可以使用单击并拖动方法关注特定区域.

分隔符值分隔值API

分隔符是一个序列或更多字符用于指定纯文本或其他数据中单独的独立区域之间的边界.字段分隔符是逗号分隔值的序列.简而言之,分隔符分隔值是逗号分隔值(CSV)或制表符分隔值(TSV).