[译] D3.js 之 d3-shap 简介

[译] D3.js 之 d3-shap 简介

译者注

原文: 来自 D3.js 做者 Mike Bostock 的 Introducing d3-shape

译者: ssthouse
联系译者: 邮箱(ssthouse@163.com) & 微信(wssst123456789)

译文

假设你如今想建立一个用于学习特定数据集的工具, 你最容易想到的呈现方式是什么呢? 一个能够自定义的 chart? 一个抽象的坐标系统? 将数据编码成图像来表示?

每一种方法都有它的好处. 好比你想作探索性的数据可视化, 你可能会更偏向于快速(高效)的方法, 由于这样你能够快速的测试各类不一样的可视化效果.
若是是作讲解性质的数据可视化, 你可能会选择能精细控制的方法, 以让你的观众能精准的理解你的意图.

无论你选择的哪一种方法, 你最终都须要将实际的图形画在屏幕上, 也就是说你须要用你的数据生成一些能表明这些数据的图形.

那么, 你打算如何画出图形呢?

一些简单的图形, 好比柱状图, 经过 canvas 的 api 就能够轻松的画出: fillRect

若是要画出一些直线, 或者折线也不难, 使用 canvas 的 moveTo , lineTo 方法便可:

但如果想画出曲线图呢? 想要画出 圆滑的曲线 彷佛开始变得不那么容易了:

咱们再增长一点难度, 若是咱们想要曲线圆滑的同时, 还要保持数据的单调性呢?

再者, 若是咱们想画出扇形切片呢? 若是咱们还想给扇形切片加上圆角, 加上切片之间的间距呢,

怎么样, 是否是以为有些挑战了呢?

这时候该 d3-shape 出场了:
d3-shape 是一个用于绘制数据可视化中常见的几何图形的库. 它很是的小巧, 并且能够同时和 SVG 和 Canvas 协同工做.

d3-shape 有多小?

大概 28kb, 压缩后仅仅 6kb. 它还包括了 d3-path . 它总共代码仅仅 1500 行, 因此我很是推荐你看看它的源代码.

使用 d3-shape 你将获得什么呢?

简单的说, 你将获得绘制 线 和 面 的能力. 包括: 各类各样的曲线, 派图, 扇形图, 散点图等等.

除此以外还有更多, d3-hierarchy 模块包括了绘制包含层级结构数据的功能(好比树状图). 还有更多独立的模块可以帮助你绘制出更多定制化的图形: 好比 绘制地理位置的图像, 绘制模拟物理系统的网络图等等.

d3-shape 的目的是什么呢?

d3-shape 是一个让你进行数据可视化的工具. 它特别适合和已有的操做 DOM 的框架一同使用(意味着不须要 d3-selection), 好比 Angular, Vue, React. d3-js 中还有许多方便的模块, 配合着使用能更好的提高你的数据可视化效率, 好比: d3-color, d3-format, d3-time and d3-scale.

想要贡献代码?

想要本身实现一个曲线生成的算法? 想要建立一种消除数据噪点的曲线? 查看源代码, 在 github 上提交 pull request. 或者查看编写 d3 插件的文章, 建立并发布你本身的 d3 插件 模块.

祝你 d3-shape 使用愉快!

想继续了解 D3.js

这里是个人 D3.js 、 数据可视化 的github 地址, 欢迎 start & fork

D3-blog

若是以为不错的话, 不妨点击下面的连接关注一下 : )

github主页

知乎专栏

掘金

想直接联系我 ?

邮箱: ssthouse@163.com

微信: