D3.js 是一个强大的 JavaScript 库，可以帮助我们创建各种各样的数据可视化。在这篇教程中，我们将会使用 D3.js 来创建一个可以交互的柱状图。本文假定读者已经有 JavaScript 编程基础和一些 HTML/CSS 知识。
准备工作
为了开始本教程，你需要在你的项目中引入 D3.js 库。你可以通过以下方式引入：
<script src="https://d3js.org/d3.v6.min.js"></script>
生成数据
在本教程中，我们将会创建一个简单的柱状图来展示每个月份的收益。首先，我们需要生成一些数据。在这里，我们将使用随机数来模拟每个月份的收益。你可以根据你的项目需求修改数据源。
-- -------------------- ---- ------- ----- ---- - - - ------ ---------- -------- ------------- - ----- -- - ------ ----------- -------- ------------- - ----- -- - ------ -------- -------- ------------- - ----- -- - ------ -------- -------- ------------- - ----- -- - ------ ------ -------- ------------- - ----- -- - ------ ------- -------- ------------- - ----- -- - ------ ------- -------- ------------- - ----- -- - ------ --------- -------- ------------- - ----- -- - ------ ------------ -------- ------------- - ----- -- - ------ ---------- -------- ------------- - ----- -- - ------ ----------- -------- ------------- - ----- -- - ------ ----------- -------- ------------- - ----- - --
创建 SVG 元素
我们需要创建一个 SVG 元素来容纳我们的柱状图。在这里，我们将使用 D3.js 的 select 函数来选择一个 DOM 元素，并使用 append 函数来创建 SVG 元素。
const svg = d3.select("body")
.append("svg")
.attr("width", 500)
.attr("height", 300);创建比例尺
我们需要将数据映射到可视化空间中。为此，我们需要创建一个比例尺。在这里，我们将使用 D3.js 的 scaleLinear 函数来创建线性比例尺，以将收入映射到垂直轴上。
const yScale = d3.scaleLinear() .domain([0, d3.max(data, d => d.revenue)]) .range([0, 250]);
创建柱状图
现在我们已经准备好创建柱状图。在这里，我们将使用 D3.js 的 selectAll 函数来选择所有未创建的矩形元素，并使用 data 函数将数据与元素绑定。然后，我们使用 enter 函数来创建新矩形元素，并使用 attr 函数设置其属性。
-- -------------------- ---- ------- --------------------- ----------- -------- --------------- ---------- --- -- -- - - --- ---------- - -- --- - ------------------ -------------- --- --------------- - -- ------------------ ------------- -------------
添加轴
最后，我们需要添加轴。在这里，我们将使用 D3.js 的 axisBottom 和 axisLeft 函数来创建 x 轴和 y 轴，并使用 call 函数将它们添加到 SVG 元素中。
-- -------------------- ---- ------- ----- ----- - --------------- --------------- --------------- ------------------ ------------- ------ ------------- ----- ----- - ------------- - ----------------------------------------------------------- -------- ----------------------------------------------------------------------------------