关于javascript:一个关于D3js学习的仓库建立了

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 这座大山是必须攀登的。

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