用 D3.js 绘制精美数据图表

2024-10-22

解开数据洞察：用 D3.js 创建精美图表

想象一下，你经营一家小型电子商务企业。你有大量关于销售数据的资料——哪些产品受欢迎、客户什么时候购买最多以及哪种营销活动效果最佳？这些数据很有价值，但原始数字可能会让人难以理解。这时候数据可视化就派上用场了！

图表是将复杂数据转化为易于理解的视觉化的强大工具，使您可以快速识别趋势、模式和异常值。而像 D3.js（数据驱动的文档）这样的库，在创建真正动态且可定制的图表方面表现出色。

今天，我们将深入了解 D3.js 的世界，学习如何构建三种基本图表类型：柱状图、折线图和散点图。

为什么选择 D3.js？

D3.js 因其灵活性与控制力而脱颖而出。与现成的图表工具不同，D3.js 允许您控制所有图表方面——从轴标签到配色方案，甚至动画！这使其非常适合创建完美匹配您的品牌和数据的独特可视化。

让我们开始吧：用 D3.js 创建我们的第一个图表

我们将使用一个关于每月销售额的简单数据集：

月份 销售额
一月 100
二月 150
三月 200
四月 250
五月 300

步骤 1：设置 HTML 画布：

首先，我们需要一个地方来显示我们的图表。在您的 HTML 文件中添加以下代码片段：

<div id="chart"></div>

步骤 2：包含 D3.js 库：

在您的 HTML <head> 部分内添加以下行：

<script src="https://d3js.org/d3.v7.min.js"></script>

步骤 3：编写 JavaScript 代码来创建条形图：

以下是生成我们条形图的基本 D3.js 代码：

const data = [
  { month: "一月", sales: 100 },
  { month: "二月", sales: 150 },
  { month: "三月", sales: 200 },
  { month: "四月", sales: 250 },
  { month: "五月", sales: 300 }
];

const margin = { top: 20, right: 20, bottom: 30, left: 40 };
const width = 960 - margin.left - margin.right;
const height = 500 - margin.top - margin.bottom;

const svg = d3.select("#chart")
  .append("svg")
  .attr("width", width + margin.left + margin.right)
  .attr("height", height + margin.top + margin.bottom)
  .append("g")
  .attr("transform", `translate(${margin.left},${margin.top})`);

const xScale = d3.scaleBand()
  .domain(data.map(d => d.month))
  .range([0, width])
  .padding(0.1);

const yScale = d3.scaleLinear()
  .domain([0, d3.max(data, d => d.sales)])
  .range([height, 0]);

svg.selectAll("rect")
  .data(data)
  .enter()
  .append("rect")
  .attr("x", d => xScale(d.month))
  .attr("y", d => yScale(d.sales))
  .attr("width", xScale.bandwidth())
  .attr("height", d => height - yScale(d.sales))
  .attr("fill", "steelblue");

svg.append("g")
  .attr("transform", `translate(0,${height})`)
  .call(d3.axisBottom(xScale));

svg.append("g")
  .call(d3.axisLeft(yScale));

解释：

进阶内容：

这仅仅是一个开始！探索 D3.js 的广泛文档和在线教程，以发现其强大的功能。

D3.js 使您能够将数据转化为引人入胜的故事，从而挖掘隐藏在数字中的宝贵见解。祝您画图愉快! ## D3.js 图表类型对比

图表类型 描述 使用场景
柱状图 垂直或水平的条块，每个块代表一个数据点。高度或宽度表示数据值的大小。 展示类别间的数据比较，例如销售额、人口分布、考试成绩等。
折线图 使用曲线连接数据点的图表，突出数据随时间变化的趋势。 展示趋势和模式，例如股票价格走势、网站流量变化、气温记录等。
散点图 将数据点用标记表示，每个标记的位置由横坐标和纵坐标决定。 探索数据的相关性，例如身高与体重、学分与考试成绩、广告支出与销售额等。
Blog Post Image