d3.js

安冬的码畜日常

【D3.js in Action 3 精译_044】5.1 饼图和环形图的创建（四）：数据标签的添加当前内容所在位置：《D3.js in Action》全新第三版封面译者按继上一小节利用全新的 D3 饼图布局实现圆弧的绘制后，这一节再趁热打铁，看看如何从增强图表的可读性出发，再进行一些细节调整。

安冬的码畜日常

【D3.js in Action 3 精译_040】4.4 D3 弧形图的绘制方法当前内容所在位置：《D3.js in Action》全新第三版封面译者按终于来到了第四章的最后一节——弧形图的绘制。有了前面几节的知识储备，看似云遮雾绕的 D3 弧形图绘制也可以立马手到擒来。这也是 D3 可视化的另一个强大之处——掌握相关基础知识后可以快速触类旁通其他图表类型！

安冬的码畜日常

【D3.js in Action 3 精译_039】4.3 D3 面积图的绘制方法及其边界标签的添加当前内容所在位置：《D3.js in Action》全新第三版封面译者按由于 D3 的折线图和面积图在实现方式上相似度极高，这一篇就趁热打铁，将示例折线图剩下的面积图部分一并学完。看似复杂的面积图在作者精心绘制的示意图的帮助下变得非常简单（至少比我的其他专栏要容易很多），曾在 MSOffice 中盛行的“字不如表、表不如图”的说法用到 D3 数据可视化上依然适用。如果早几年出现这样的扫盲级 D3 参考书，如今国内数据可视化领域 ECharts 一手遮天的局面没准还真能被打破。一起学起来吧！

D3.js（五）：实现组织架构图

安冬的码畜日常

【D3.js in Action 3 精译_032】第四章 D3 直线、曲线与弧线的绘制 + 4.1 坐标轴的创建（上）当前内容所在位置（可进入专栏查看其他译好的章节内容）《D3.js in Action》全新第三版封面译者按从今天开始进入全新的第四章学习。前面条形图还不熟练的朋友最好根据上面给出的完整目录查漏补缺，以免影响后续的正常学习。一切就绪后，就可以随我一起来看看，这一章作者又将带领大家完成一个什么样的 D3 实战项目。

安冬的码畜日常

【D3.js in Action 3 精译_030】3.5 给 D3 条形图加注图表标签（下）：Krisztina Szűcs 人物专访 + 3.6 本章小结当前内容所在位置（可进入专栏查看其他译好的章节内容）《D3.js in Action》全新第三版封面译者按秉承“他山之石，可以攻玉”的创作理念，本章同前面两章一样，在章节末尾附上了一篇人物专访。本次接受访谈的数据可视化名家是一位来自匈牙利的著名平面设计师克里斯蒂娜·苏茨，她以其在设计和数据可视化方面的独特视角和创新方法闻名于世。接下来就放松放松，看看她在学习 D3 的时候都踩过哪些坑，又有什么样的经验之谈给到大家——

安冬的码畜日常

【D3.js in Action 3 精译_029】3.5 给 D3 条形图加注图表标签（上）当前内容所在位置（可进入专栏查看其他译好的章节内容）《D3.js in Action》全新第三版封面译者按终于来到了本章代码量最为密集的最后一个小节了。作者真的是事无巨细，真正把大家当成零基础的数据可视化爱好者，竟然细致到 JS 的注释是怎么加的也要说明一下……不过这也算是本书的一大魅力吧。也多亏了这份执着和对细节把控的精益求精，新版才出现了这么多直观精美的配图。由于篇幅太长，本节最后的人物专访就放到下篇，本文为上篇，主要介绍条形图的最终实现。一起跟随作者实战起来吧！

安冬的码畜日常

【D3.js in Action 3 精译_027】3.4 让 D3 数据适应屏幕（下）—— D3 分段比例尺的用法当前内容所在位置（可进入专栏查看其他译好的章节内容）《D3.js in Action》全新第三版封面绘制示例条形图要用到的第二种比例尺为分段比例尺（band scale）。它属于之前介绍的第四类（详见 3.4.1 节内容）：接受离散型输入、返回连续型输出。要在可用空间内处理离散的各矩形条的分布，这正是 D3 分段比例尺的强项。

安冬的码畜日常

【D3.js in Action 3 精译_028】3.4 小节 DIY 实战：使用 Observable 在线绘制 D3 条形图当前内容所在位置（可进入专栏查看其他译好的章节内容）《D3.js in Action》全新第三版封面写在前面

安冬的码畜日常

【D3.js in Action 3 精译_025】3.4 让 D3 数据适应屏幕（中）—— 线性比例尺的用法当前内容所在位置（可进入专栏查看其他译好的章节内容）《D3.js in Action》全新第三版封面译者按上篇介绍了 D3 比例尺的一些基本情况，本篇就来看看 D3 最常用的线性比例尺究竟该怎么用。

大数据新视界 --大数据大厂之JavaScript在大数据前端展示中的精彩应用💖💖💖亲爱的朋友们，热烈欢迎你们来到青云交的博客！能与你们在此邂逅，我满心欢喜，深感无比荣幸。在这个瞬息万变的时代，我们每个人都在苦苦追寻一处能让心灵安然栖息的港湾。而我的博客，正是这样一个温暖美好的所在。在这里，你们不仅能够收获既富有趣味又极为实用的内容知识，还可以毫无拘束地畅所欲言，尽情分享自己独特的见解。我真诚地期待着你们的到来，愿我们能在这片小小的天地里共同成长，共同进步。💖💖💖

大数据新视界 --大数据大厂之 Vue.js 与大数据可视化：打造惊艳的数据界面💖💖💖亲爱的朋友们，热烈欢迎你们来到青云交的博客！能与你们在此邂逅，我满心欢喜，深感无比荣幸。在这个瞬息万变的时代，我们每个人都在苦苦追寻一处能让心灵安然栖息的港湾。而我的博客，正是这样一个温暖美好的所在。在这里，你们不仅能够收获既富有趣味又极为实用的内容知识，还可以毫无拘束地畅所欲言，尽情分享自己独特的见解。我真诚地期待着你们的到来，愿我们能在这片小小的天地里共同成长，共同进步。💖💖💖

安冬的码畜日常

【D3.js in Action 3 精译_022】3.2 使用 D3 完成数据准备工作当前内容所在位置有了数据集，下一步就是用 D3 将其加载到项目中，如图 3.8 中的步骤 2 所示。然后就是确保数据按正确的格式进行处理，其间也可能需要对数据进行多方位的测量。本节介绍的 D3 方法都是为了完成上述准备工作，并为示例条形图的创建提供有效数据。

Vue第三方库与插件实战手册title: Vue第三方库与插件实战手册 date: 2024/6/8 updated: 2024/6/8

手把手教你优化d3.js股权穿透图在看这篇文章之前，请务必看完上篇文章——手把手教你使用d3.js画一个股权穿透图大噶吼啊，我是吴小远，距离上一次更新都十一个月了，四舍五入都一年了。你要说我为啥这么久都不更新，那确实是肚子里没货了，而我又不想写什么水文，就这么拖着了。

JAVA-博弈人生-超哥

【D3.js Tidy tree绘制树形图,单棵树,左右树,平移,拖拽,树形中的天花板实现,源码实现】D3 的全称是（Data-Driven Documents），顾名思义可以知道是一个被数据驱动的文档。听名字有点抽象，说简单一点，其实就是一个 JavaScript 的函数库，使用它主要是用来做数据可视化的。可以帮助你使用 HTML, CSS, SVG 以及 Canvas 来展示数据。D3 遵循现有的 Web 标准，可以不需要其他任何框架独立运行在现代浏览器中，它结合强大的可视化组件来驱动 DOM 操作。

【d3.js实战】git提交统计图通过之前的多篇博文的详细介绍，我们已经对d3的开发过程有了相当深入的了解和熟悉。在这篇文章中，我们将利用这些知识，来开发一个展示git提交记录的效果。

动态排名条形图的起源与发展动态排名条形图 —— 就是类似上图这种根据一个时间序列变化条形图数据并带有过渡效果的动画。这种条形图动画在国外被称为 “Bar Chart Race” 或 “Bar Rank” ，在国内他叫 “动态排名条形图”，“条形图竞赛”。

一站式前端可视化解决方案常见的前端可视化解决方案包括：Canvas、 D3、 threeJs、 antV、 Echarts等。

前端大型可视化工程（D3）构建步骤在前端开发的世界里，数据可视化是连接信息与用户的桥梁。D3.js作为一款功能强大的数据可视化工具，在构建大型工程时，细节尤为重要。下文将逐一阐释构建D3前端大型工程的步骤，并提供必要的代码，以保证过程的稳定性与扩展性。