D3.js入门可视化讲解
D3.js（数据驱动的文档（D3.js））是一个强大的JavaScript库，用于在网页浏览器中创建交互式和数据驱动的可视化。其灵活性和处理复杂数据的能力使其无论是开发人员还是数据科学家都非常喜欢它。与预制的图表库不同，D3.js提供了底层控制，允许高度定制和动态的视觉效果。
要为什么学习D3.js？- 自定义：D3 允许你完全控制图表的设计和交互性。你不仅可以使用标准的条形图和折线图，还可以创建符合你需求的独特可视化。
- 数据驱动设计：使用 D3，你可以将数据直接绑定到 DOM 元素上，从而更容易创建每个图形元素都代表一个数据点的互动图表。
- 可扩展性：无论处理小型数据集还是大规模复杂数据集，D3都能游刃有余，并且它与现代网页技术（如 HTML、CSS 和 SVG）无缝集成。
- 技能转移性：学习 D3 不仅能让你更深入地理解网页技术，这对数据科学、前端开发和 UX 设计等多个领域都非常有用。
我们用D3.js做一个简单的条形图来展示其基本概念。
HTML和脚本代码下面是一份构建基本柱状图的完整代码：
<body>
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://d3js.org/d3.v7.min.js"></script>
<script>
// 数据集 :
const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
// SVG 尺寸 :
const w = 500; // 宽度 :
const h = 100; // 高度 :
// 创建 SVG 容器 :
const svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
// 添加条 :
svg.selectAll("rect")
.data(dataset)
.enter()
.append("rect")
.attr("x", (d, i) => i * 30) // 位置 :
.attr("y", (d) => h - 3 * d) // 条的高度 :
.attr("width", 25) // 条的宽度 :
.attr("height", (d) => 3 * d) // 条的高度 :
.attr("fill", "navy"); // 条的颜色 :
// 添加标签 :
svg.selectAll("text")
.data(dataset)
.enter()
.append("text")
.attr("x", (d, i) => i * 30 + 10) // 标签位置 :
.attr("y", (d) => h - 3 * d - 3) // 标签的垂直位置 :
.text((d) => d) // 值 :
.attr("font-size", "12px") // 字体大小 :
.attr("fill", "white") // 标签颜色 :
.attr("text-anchor", "middle"); // 文本对齐 :
</script>
</body>
数据绑定（这里简单解释一下，帮助理解）：
const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9]; // 数据集定义
这个数据集代表要展示的数据。每个值代表柱状图的高度。
SVG生成:
// 创建SVG元素：
const svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h) ;创建一个 SVG 容器用来放置图表，它充当了所有图形元素的画布。
创建条形图：
// 添加矩形以表示条形
svg.selectAll("rect")
.data(dataset)
.enter()
.append("rect")
.attr("x", (d, i) => i * 30) // 条形的位置
.attr("y", (d) => h - 3 * d) // 条形的高度
.attr("width", 25) // 条形的宽度
.attr("height", (d) => 3 * d) // 条形的高度
.attr("fill", "navy"); // 条形的颜色selectAll("rect")会选中 SVG 中的所有rect元素。data(dataset)将数据集挂载到这些元素上。enter()为每个数据点生成占位元素。append("rect")为每个条形图追加rect元素。
数据标签:
// 添加数据标签
svg.selectAll("text")
.data(dataset)
.enter()
.append("text")
.attr("x", (d, i) => i * 30 + 10) // 标签居中对齐
.attr("y", (d) => h - 3 * d - 3) // 置于柱状图上方
.text((d) => d) // 显示为数值
.attr("font-size", "12px") // 设置字体大小
.attr("fill", "white") // 标签颜色
.attr("text-anchor", "middle"); // 文本对齐-
标签在条形图上方显示数据值。
x和y属性值将文本居中定位在条形图上方。
- 数据绑定：D3的
data()方法使得将数据集绑定到视觉元素变得简单易行。 - 动态更新：使用D3，你可以通过修改底层数据轻松实现可视化更新。
- 交互性：虽然这个例子是静态的，但D3支持添加动画和交互效果，比如提示框或过渡效果。
要提高你的 D3.js 技能，
- 学习如何为动态图表调整大小设置比例尺。
- 探索 D3 的过渡和动画，以增加互动性。
- 尝试不同的图表类型，如折线图、饼图和散点图。
学会了D3.js之后，你将能够将原始数据源转化为引人入胜且互动的故事，这对基于数据的决策非常重要。
点击查看更多内容
为 TA 点赞
评论
共同学习，写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦