效果如图，这次直接上实战。 使用d3-drag实现交互式拖拽功能 在数据可视化中，交互是非常重要的一部分，能够使用户与图表进行互动并进行自定义操作。其中之一就是拖拽功能，可以让用户自由地移...

先上效果图： D3.js 的交互性能强大，可以帮助我们在数据可视化中实现各种交互效果。D3.js 提供了丰富的事件处理机制，可以方便地监听和处理各种用户交互事件。在本文中，我们将介绍 D3.js 的交...

在数据可视化中，Tooltip（工具提示）是一个常用的交互元素，它可以提供更详细的数据信息，并在用户悬停或点击某个数据点时显示。本文将介绍如何使用D3.js的交互来实现Tooltip功能，从而增强图...

前面写了一篇 【d3.js入门】基本柱状图，这次我们在这个柱状图基础上添加一些动画效果。 好，废话多说，我们再画一遍柱状图。 绘制柱状图 D3.js 是一个 JavaScript 库，用于创建动态、交互式的...

【趟坑记录】d3.zoom()的正确使用姿势 @d3.v7 在开发一个D3应用的时候遇到了一个zoom相关的问题，记录解决思路与方案 问题重现 最近在开发一个D3应用的时候遇到了一个zoom相关的问题，应用里有...

前面写了一篇 【d3.js入门】 基本散点图，这次我们在这个面积图基础上添加一些动画效果。 好，废话多说，我们继续绘制换一个散点图。 首先，我们创建一个 div 元素，并将其添加到 body 里： le...

上一篇文章我们讲了【d3.js入门】基本面积图动画，这篇文章我们基于简单的面积图来开发一个有趣的小案例。 实现思路： 绘制面积图图 绘制很多面积图 让面积图高低有层级感 让面积图填充渐变色 ...

前面写了一篇 # 【d3.js入门】基本雷达图，这次我们在这个面积图基础上添加一些动画效果。 好，废话多说，我们继续绘制一个基本雷达图。 雷达图，又称为蜘蛛图或星形图，是一种用于在二维平面...

一个月前我曾撰文《使用batik在kotlin中将TTF字体转换为SVG图像》，介绍了如何将汉字转为SVG Path路径进行展示和变换，以此为基础不妨畅想一下，用动画将一个汉字变为另一个汉字，听上去是不是...

前面写了一篇 【d3.js入门】基本折线图，这次我们在这个折线图基础上添加一些动画效果。 好，废话多说，我们又画一遍折线图。 折线图 // 创建一个div元素，并将其添加到文档的body中 let dom =...

前面写了一篇 【d3.js入门】基本面积图，这次我们在这个面积图基础上添加一些动画效果。 我们先回忆一下如何画面积图。 这段代码使用D3.js绘制了一个基本面积图，并将图形插入到HTML页面中。以...

前面写了一篇 【d3.js入门】 基本饼图，这次我们在这个面积图基础上添加一些动画效果。 我们继续绘制D3.js饼图 绘制饼图 首先，定义饼图的数据集，包括每个区块的名称和数值： let dataset = [...

提起日历，第一感就会让人想到一页显示一个月的那种常规日历，那么你是否会想起小时候见到的挂在墙上的手撕日历呢？一页纸只显示当天一天，但现在提倡环保，再使用那种手撕日历便不太好了。不过...