深入浅出 D3.js 开发实战：用响应式设计优化散点图（方案一）

2024-01-08 08:23:31

引言

散点图是一种经典的数据可视化图表，广泛用于展示两个变量之间的关系。在本系列文章中，我们将深入探索 D3.js 在 Observable 中的官方散点图样例，逐行解读代码，并将其复现在 CodePen 中。不仅如此，我们还将为图表添加响应性，使其能够适应不同设备和屏幕尺寸。

复现官方样例

首先，让我们在 CodePen 中复现 D3.js 官方散点图样例。您可以通过以下步骤操作：

在 CodePen 中创建一个新笔（Pen）。
在 HTML 部分粘贴以下代码：

<!DOCTYPE html>
<meta charset="utf-8">
<body>
  <div id="chart"></div>
  <script src="https://d3js.org/d3.v7.min.js"></script>
  <script src="script.js"></script>
</body>

在 CSS 部分粘贴以下代码：

body {
  font-family: sans-serif;
}

#chart {
  width: 600px;
  height: 400px;
}

.dot {
  fill: steelblue;
  stroke: white;
  stroke-width: 1.5px;
}

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  stroke-width: 1px;
}

在 JavaScript 部分粘贴以下代码：

// 数据
const data = [
  {x: 10, y: 20},
  {x: 30, y: 40},
  {x: 50, y: 60},
  {x: 70, y: 80},
  {x: 90, y: 100}
];

// 创建 SVG 画布
const svg = d3.select("#chart")
  .append("svg")
  .attr("width", 600)
  .attr("height", 400);

// 定义比例尺
const xScale = d3.scaleLinear()
  .domain([0, 100])
  .range([0, 600]);

const yScale = d3.scaleLinear()
  .domain([0, 100])
  .range([400, 0]);

// 定义轴线
const xAxis = d3.axisBottom(xScale);
const yAxis = d3.axisLeft(yScale);

// 添加轴线
svg.append("g")
  .attr("transform", "translate(0, 400)")
  .call(xAxis);

svg.append("g")
  .attr("transform", "translate(0, 0)")
  .call(yAxis);

// 添加散点
svg.selectAll(".dot")
  .data(data)
  .enter()
  .append("circle")
  .attr("class", "dot")
  .attr("cx", d => xScale(d.x))
  .attr("cy", d => yScale(d.y))
  .attr("r", 5);

保存并运行 CodePen，您将看到一个散点图。

添加响应性

接下来，我们将为散点图添加响应性，使其能够适应不同设备和屏幕尺寸。

在 JavaScript 部分添加以下代码：

// 监听窗口大小变化事件
window.addEventListener("resize", makeResponsive);

// 响应式函数
function makeResponsive() {
  // 获取当前窗口宽度和高度
  const width = window.innerWidth;
  const height = window.innerHeight;

  // 更新 SVG 画布的尺寸
  svg.attr("width", width)
    .attr("height", height);

  // 更新比例尺的范围
  xScale.range([0, width]);
  yScale.range([height, 0]);

  // 更新轴线的刻度
  xAxis.scale(xScale);
  yAxis.scale(yScale);

  // 更新轴线的位置
  svg.select("g.axis--x")
    .attr("transform", "translate(0, " + height + ")");

  // 更新散点的坐标
  svg.selectAll(".dot")
    .attr("cx", d => xScale(d.x))
    .attr("cy", d => yScale(d.y));
}

// 调用响应式函数
makeResponsive();