D3.js简介(Introduction to D3.js)
D3.js是一个JavaScript库，用于在浏览器中创建交互式可视化。 D3库允许我们在数据集的上下文中操纵网页的元素。 这些元素可以是HTML，SVG或Canvas元素，可以根据数据集的内容进行引入，删除或编辑。 它是一个用于操作DOM对象的库。 D3.js可以成为数据探索的宝贵帮助。 它使您可以控制数据的表示，并允许您添加数据交互性。
与其他库相比，D3.js是最重要的框架之一。 这是因为; 它适用于Web和数据可视化，具有企业级。 另一个原因是其极大的灵活性，使世界各地的开发人员能够创建许多高级图表。 此外，它还在很大程度上扩展了其功能。
让我们了解D3.js的基本概念，如下 -
- Selections
- 数据加入
- SVG
- Transition
- Animation
- D3.js API
让我们详细了解这些概念。
选择(Selections)
选择是D3.js的核心概念之一。 它基于CSS Selector概念。 那些已经使用并了解JQuery的人已经可以轻松理解选择。 它使我们能够基于CSS选择器选择DOM，然后提供修改，追加和删除DOM元素的选项。
数据加入
数据连接是D3.js中的另一个重要概念。 它与选择一起使用，使我们能够根据我们的数据集（一系列数值）操作HTML文档。 默认情况下，D3.js为数据集提供其方法中的最高优先级，数据集中的每个项目对应于HTML元素。
SVG
SVG代表Scalable Vector Graphics 。 SVG是一种基于XML的矢量图形格式。 它提供了绘制不同形状的选项，如直线，矩形，圆形，椭圆等。因此，使用SVG设计可视化为您提供更多功能和灵活性。
转型(Transformation)
SVG提供了转换单个SVG形状元素或SVG元素组的选项。 SVG变换支持翻译，缩放，旋转和倾斜。
过渡(Transition)
过渡是从一个项目的一个状态转换到另一个状态的过程。 D3.js提供了一个transition（）方法来在HTML页面中执行转换。
动画 (Animation)
D3.js通过过渡支持动画。 动画可以通过正确使用过渡来完成。 转换是一种有限形式的关键帧动画，只有两个关键帧: start和end 。 起始关键帧通常是DOM的当前状态，而结束关键帧是您指定的一组属性，样式和其他属性。 转换非常适合转换到新视图，而不需要依赖于起始视图的复杂代码。
D3.js API
让我们简要了解一些重要的D3.js API的方法。
集合API
集合只是一个将多个元素组合到一个单元中的对象。 它也被称为容器。 它包含对象，地图，集合和巢穴。
路径API
路径用于绘制矩形，圆形，椭圆形，折线，多边形，直线和曲线。 SVG路径表示可以描边，填充，用作剪切路径或三者的任意组合的形状轮廓。
Axis API
D3.js提供绘制轴的功能。 轴由线，刻度和标签组成。 轴使用比例，因此每个轴都需要给出一个可以使用的比例。
缩放API
缩放有助于扩展您的内容。 您可以使用单击并拖动方法专注于特定区域。
分隔符分隔值API
分隔符是一个或多个字符的序列，用于指定纯文本或其他数据中单独的独立区域之间的边界。 字段分隔符是逗号分隔值的序列。 简而言之，分隔符分隔值是逗号分隔值（CSV）或制表符分隔值（TSV）。
