D3 很早就听说了想要尝试一下,找到的中文版翻译在查 API 的时候可以参考,对于入门不太方便,打算先把官方最新的入门教程同步翻译一下。
本系列将引导你踏出使用 D3.js 的第一步。
在我们开始之前,值得简单考虑一下:为什么要费心学习 D3 ?为什么要在 Observable 上学习?
首先,D3 很受欢迎(179M 下载量和 97K start),所以你有一个良好的陪伴群体。这里有大量社区开发的资源,包括教程、视频、课程和书籍。D3 团队已经发布了数百个可派生的示例和教程,以有益于你的学习和生产力。
另一方面,D3 具有灵活的特性。D3 的超能力是你可以做任何你想做的事情——自由创造!D3 展廊是一个名副其实的种类动物园:treemap、hierarchical edge bundling、 Sankey diagram、 density contours、 force-directed graph 等等(还有近百个地图投影!)。这种灵活性源于 D3 的基础方法,主要关注可组合的基本元素,如形状和比例,而不是可配置的图表。D3 不施加任何约束,因此有益于利用现代浏览器支持的所有功能。
D3 以动画和交互著称。如果你有几分钟时间,可以观看一个 bar chart race 或 animated treemap 。进入到 hierarchical bar chart 、collapsible tree 或者可缩放的 sunburst、treemap 或 packed circles 。或者刷一个scatterplot matrix 或者放大一个 area chart 。动画是一个讲故事的有力载体,而交互让活跃的读者能够探索。
当然,获得这种力量是有代价的。有很多东西需要学习:D3 有超过三十个模块和一千种方法!D3 可能比专门用于探索可视化的工具更乏味,例如 Vega Lite。
这个时候轮到 Observable 出场了。
Observable 是学习 D3 的理想环境,因为它使用数据流简化了代码,就像电子表格一样。当你编辑时,单元格会自动运行以获得快速反馈。你几乎不需要代码就可以添加交互或动画!我们将介绍 Observable 的特性。
Observable 围绕协作展开,帮助你从社区中学习并回馈社区,而不仅仅是复制和粘贴。任何笔记本都可以派生或导入。笔记本可以导出为可复用的组件,例如 color legend 或 scrubber 。你可以对单元格进行评论、建议和合并更改,或寻求帮助。
简介足够了。让我们拉开帷幕,开始学习 D3 。
打开软件,我们按快捷键ctrl+n,建立一个新的文件。 点击常用,选择布局。 点击...
在讲CSS优先级之前,我们得要了解什么是CSS,CSS是用来做什么的。 首先,我们对C...
作者 / Krish Vitaldevara,Google Play 信任与安全产品管理总监 多年来,向数十...
行高line-height实现单行文本垂直居中 以前一直认为单行文本垂直居中要将高度和...
最近在做项目时,发现CSS3中关于动画的技术,自己很少运用在项目中,平时一些列...
CSS3实现酷炫的3D旋转透视 3D动画效果现在越来越普及,已经被广泛的应用到了各个...
一、作用 离线浏览 - 根据文件规则把资源缓存在本地,脱机依然能够访问资源,联...
背景 京东购物小程序作为京东小程序业务流量的主要入口,承载着许多的活动和页面...
在ie下设置 css 样式 style="cursor:hand;" 可以正常显示 但是在firefox下就不行...
Dreamweaver中如何使用Flash影片 1、首先需要我们准备的是一个Flash文件,其次最...