📅  最后修改于: 2020-10-26 05:55:53        🧑  作者: Mango

D3代表数据驱动的文档。 D3.js是一个JavaScript库，用于根据数据处理文档。 D3.js是一个动态的，交互式的，在线数据可视化框架，已在许多网站中使用。 D3.js由Mike Bostock编写，它是对称为Protovis的早期可视化工具包的继承者。本教程将为您提供有关D3.jsframework的完整知识。这是一个入门教程，涵盖了数据驱动文档的基础知识，并说明了如何处理其各种组件和子...

📅  最后修改于: 2020-10-26 05:56:25        🧑  作者: Mango

数据可视化是以图形或图形格式表示的数据。数据可视化的主要目标是通过统计图形，曲线图和信息图形清晰有效地传达信息。数据可视化有助于我们快速有效地交流我们的见解。可视化表示的任何类型的数据都允许用户比较数据，生成分析报告，理解模式，从而帮助他们做出决定。数据可视化可以是交互式的，以便用户分析图表中的特定数据。很好，可以使用不同的JavaScript框架在常规网站甚至移动应用程序中开发和集成数据可视化。...

📅  最后修改于: 2020-10-26 05:56:52        🧑  作者: Mango

在本章中，我们将学习如何设置D3.js开发环境。在开始之前，我们需要以下组件-D3.js库编辑网页浏览器网络服务器让我们详细一步一步地进行操作。D3.js库我们需要在您的HTML网页中包含D3.js库，以便使用D3.js创建数据可视化。我们可以通过以下两种方式做到这一点-包括项目文件夹中的D3.js库。包括来自CDN（内容交付网络）的D3.js库。下载D3.js库D3.js是一个开放源代码库，该库...

📅  最后修改于: 2020-10-26 05:57:18        🧑  作者: Mango

D3.js是一个开源JavaScript库，用于-数据驱动的文档对象模型（DOM）操纵。处理数据和形状。布置用于线性，分层，网络和地理数据的可视元素。启用用户界面（UI）状态之间的平滑过渡。启用有效的用户交互。网络标准在开始使用D3.js创建可视化之前，我们需要熟悉Web标准。以下Web标准在D3.js中大量使用。超文本标记语言（HTML）文档对象模型（DOM）级联样式表（CSS）可缩放矢量图形（...

📅  最后修改于: 2020-10-26 05:58:17        🧑  作者: Mango

选择是D3.js的核心概念之一。它基于CSS选择器。它使我们可以选择网页中的一个或多个元素。另外，它允许我们修改，附加或删除与预定义数据集相关的元素。在本章中，我们将看到如何使用选择来创建数据可视化。D3.js使用以下两种方法帮助从HTML页面选择元素-select（）-通过匹配给定的CSS选择器仅选择一个DOM元素。如果给定的CSS选择器有多个元素，它将仅选择第一个。selectAll（）-通过...

📅  最后修改于: 2020-10-26 05:59:34        🧑  作者: Mango

数据联接是D3.js中的另一个重要概念。它与选择一起工作，使我们能够根据数据集（一系列数值）来处理HTML文档。默认情况下，D3.js在其方法中为数据集赋予最高优先级，并且数据集中的每个项目都对应一个HTML元素。本章详细说明了数据联接。什么是数据联接？数据联接使我们能够基于现有HTML文档中的数据集来注入，修改和删除元素（HTML元素以及嵌入式SVG元素）。默认情况下，数据集中的每个数据项都对应...

📅  最后修改于: 2020-10-26 06:00:38        🧑  作者: Mango

SVG代表可伸缩矢量图形。 SVG是基于XML的矢量图形格式。它提供了绘制不同形状（例如直线，矩形，圆形，椭圆形等）的选项。因此，使用SVG设计可视化效果可为您提供更多功能和灵活性。SVG的功能SVG的一些显着特征如下-SVG是基于矢量的图像格式，并且是基于文本的。SVG的结构类似于HTML。SVG可以表示为Document对象模型。可以将SVG属性指定为属性。SVG应该具有相对于原点（0，0）的...

📅  最后修改于: 2020-10-26 06:01:42        🧑  作者: Mango

SVG提供了用于转换单个SVG形状元素或SVG元素组的选项。 SVG转换支持Translate，Scale，Rotate和Skew。让我们在本章中学习转换。SVG转型简介SVG引入了一个新属性，即transform，以支持转换。可能的值是以下一个或多个，翻译-需要两个选项，tx表示沿x轴的平移，ty表示沿y轴的平移。对于实施例-平移（30 30）。旋转-共有三个选项，角度表示旋转角度，角度cx和c...

📅  最后修改于: 2020-10-26 06:02:05        🧑  作者: Mango

过渡是从项目的一种状态更改为另一种状态的过程。 D3.js提供了transition（）方法来在HTML页面中执行过渡。让我们在本章中了解过渡。transition（）方法transition（）方法可用于所有选择器，并且它开始过渡过程。此方法支持大多数选择方法，例如– attr（），style（）等。但是，它不支持append（）和data（）方法，它们需要在transition（）方法之前调用...

📅  最后修改于: 2020-10-26 06:02:41        🧑  作者: Mango

D3.js通过过渡支持动画。我们可以通过适当使用过渡来制作动画。过渡是关键帧动画的有限形式，只有两个关键帧-开始和结束。起始关键帧通常是DOM的当前状态，结束关键帧是您指定的一组属性，样式和其他属性。过渡非常适合过渡到新视图，而无需依赖于起始视图的复杂代码。示例-让我们考虑“ transition_color.html”页面中的以下代码。在这里，文档的背景颜色从白色变为浅灰色，然后变为灰色。dur...

📅  最后修改于: 2020-10-26 06:05:46        🧑  作者: Mango

D3.js用于创建静态SVG图表。它有助于绘制以下图表-条形图圆图饼形图甜甜圈图折线图气泡图等本章说明有关D3中的图表的绘制。让我们详细了解每个。条形图条形图是最常用的图形类型之一，用于显示和比较不同离散类别或组的数量，频率或其他度量（例如平均值）。该图以不同条形的高度或长度与它们代表的类别的大小成比例的方式构造。x轴（水平轴）代表没有刻度的不同类别。 y轴（垂直轴）确实有刻度，它指示测量单位。可...

📅  最后修改于: 2020-10-26 06:07:00        🧑  作者: Mango

图是表示为矩形的二维平面空间。图具有一个坐标空间，其中x = 0和y = 0坐标位于左下角。根据数学笛卡尔坐标空间，图形的X坐标从左到右增长，Y坐标从下到上增长。当我们谈论用x = 30和y = 30坐标绘制圆时，我们从左下到右移动30个单位，然后再向上移动30个单位。SVG坐标空间SVG坐标空间的工作方式与数学图形坐标空间的工作方式相同，但有两个重要功能，SVG坐标空间的x = 0和y = 0坐...

📅  最后修改于: 2020-10-26 06:08:29        🧑  作者: Mango

地理空间坐标通常用于天气或人口数据。 D3.js为我们提供了三种地理数据工具-路径-它们产生最终的像素。投影-将球面坐标转换为笛卡尔坐标，流-它们加快了速度。在学习D3.js中的地理位置之前，我们应该了解以下两个术语-D3地理位置和投影让我们详细讨论这两个术语。D3地理位置它是一个地理路径生成器。 GeoJSON生成SVG路径数据字符串或将路径呈现到Canvas。建议使用画布进行动态或交互式投影，...

📅  最后修改于: 2020-10-26 06:09:46        🧑  作者: Mango

D3包含模块的集合。您可以单独使用每个模块，也可以一起使用模块的集合来执行操作。本章详细介绍了Array API。什么是数组？数组包含相同类型元素的固定大小的顺序集合。数组用于存储数据集合，但是将数组视为相同类型的变量集合通常会更有用。配置API您可以使用以下脚本轻松配置API。数组统计API方法以下是一些最重要的数组统计API方法。d3.min（数组）d3.max（数组）d3.extent（ar...

📅  最后修改于: 2020-10-26 06:10:46        🧑  作者: Mango

集合只是一个将多个元素分组为一个单元的对象。也称为容器。本章详细说明关于collections API。配置API您可以使用以下脚本配置API。集合API方法Collections API包含对象，地图，集合和嵌套。以下是最常用的collection API方法。对象APIMaps API设定APINests API让我们详细介绍每个API。对象API对象API是重要的数据类型之一。它支持以下方法...