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