Learn-D3

因为中文教程比拟少, 特定新建了一个d3相干学习(含demo)的中文仓库

分享内容:

  1. D3外部模块的深刻解说 有一个零碎整体认知
  2. Analysis- examples 剖析场景的例子
  3. Observable D3团队分享示例的环境介绍
第一点作为重点, 本系列会残缺涵盖 D3 概念, 比方:抉择、连贯、数据申请、缩放函数、事件处理和转换。

D3-Introduction


D3.js是一个 JavaScript 库，用于在 Web 上创立定制的交互式图表。

D3全称 Data-Driven Documents 3个D结尾的单词也是它D3简写的由来。

大多数图表库（例如:Echarts）提供的都是现成的图表，而 D3 由很多根底构建块组成，能够应用这些构建块构建自定义图表或地图。

在codepen中尝试编辑下面示例

应用 echarts.js 创立下面的条形图只需几行代码,

然而应用D3 创立下面的图表就会简单一些，因为它提供的办法更底层 (粒度更细一些)。并且须要有一些JavaScript, HTML, SVG和 CSS.的教训。

如果咱们的需要只是规范条形图、折线图或饼图，应该思考应用Echarts等库。然而，如果须要定制图表或有十分准确的需要，则应思考 D3js。

D3 的劣势 性能到底有哪些？

  • 十分受欢迎(上亿次的下载和上10万的star),社区沉闷 有大量开发的资源( D3团队公布为主)。
  • 超级灵便, 专一于图表组合的根底元素,例如scales,shapes。
  • 提供数据驱动批改HTML 和 SVG 元素 。
  • 各种规范数据加载 数据处理（例如 CSV 数据）。
  • 生成简单图表的助手，例如树形图、网络图。
  • 在不同图表状态之间制作动画的弱小转换成果。(十分多的内置函数)
  • 弱小的用户交互反对，包含平移、缩放和拖动。

D3 外部到底有哪些模块？

下面就是D3所有的repositories(仓库), 大略分为几类:

  • 常常应用的, 根底的(带五角星的,本系列也会解说)。例如: shapes selection
  • 工具类的 例如: time format timer
  • 废除的 很长时间不更新的。bundler request
留神本系列不会波及到源码的解说。 后续如果有须要会补充。

本系列contents(内容)

下面就是本系列内容的纲要, 简略拿几个开展说说:

Selection & data joins

Selection反对以数据驱动的形式增加、删除和批改 HTML 和 SVG 元素。。蕴含了十分多函数对元素的解决，例如:selecting Elements , modifying Elements ...

data joins反对将数据与元素进行绑定(也就是数据连贯)。

都是D3的根底模块。

data requests

能够帮忙从给定的 URL 申请文件并将文件数据转换为 JavaScript 数组 例如(CSV)。使得前面解决实在数据变得非常容易。

反对CSV JSON TXT十分多的格局。

force layout

通过特定物理规定模仿，帮忙咱们特定形式展现元素信息。提供现成的内置力函数,并且反对拓展。

transitions

transitions能够在不同图表状态平滑转换,制作动画。例如，有一些circle元素, 当用户点击update data时 平滑过渡到新的坐标地位。为图表减少了视觉吸引力。

最初

D3始终以来都是JavaScript最重要的数据可视化库之一，在创建者Mike Bostock的保护下，前途无量，至多当初没有能打的。换句话说 学习数据可视化过程中, 即使出发点不同 无论是渲染库，算法库, 工具类库 甚至工程架构。 D3这座大山是必须攀登的。

而后当您读到这里阐明对下面的内容很感兴趣 那么让咱们开始具体模块的学习吧。