D3入门实战：六步搞定散点图

2023-09-26 21:28:53

前言

在上一节中，我们通过一个散点图的案例加强了对 D3 中 Data - Join 的学习和理解。这一节，我们将继续深入探索 D3，学习如何绘制一个完整的散点图。

步骤一：准备数据

首先，我们需要准备要可视化的数据。这里我们使用一个简单的二维数据集，包含了两个变量：x 和 y。您可以根据自己的需要，准备自己的数据集。

var data = [
  {x: 1, y: 2},
  {x: 3, y: 5},
  {x: 5, y: 7},
  {x: 7, y: 9},
  {x: 9, y: 11}
];

步骤二：创建 SVG 画布

接下来，我们需要创建一个 SVG 画布来承载我们的散点图。我们可以使用 D3 的 svg 函数来创建 SVG 画布。

var svg = d3.select("body").append("svg")
  .attr("width", 500)
  .attr("height", 500);

步骤三：定义比例尺

为了将数据映射到 SVG 画布上的位置，我们需要定义比例尺。这里我们使用线性比例尺来将 x 和 y 轴上的数据映射到像素值。

var xScale = d3.scaleLinear()
  .domain([0, 10]) // x 轴数据范围
  .range([0, 500]); // x 轴像素范围

var yScale = d3.scaleLinear()
  .domain([0, 12]) // y 轴数据范围
  .range([500, 0]); // y 轴像素范围

步骤四：绘制散点

现在，我们可以使用 D3 的 selectAll 和 enter 函数来绘制散点。

var circles = svg.selectAll("circle")
  .data(data)
  .enter()
  .append("circle")
  .attr("cx", function(d) { return xScale(d.x); })
  .attr("cy", function(d) { return yScale(d.y); })
  .attr("r", 5)
  .attr("fill", "steelblue");

步骤五：添加轴线

为了让散点图更具可读性，我们可以添加轴线。这里我们使用 D3 的 axisBottom 和 axisLeft 函数来添加 x 轴和 y 轴。

var xAxis = d3.axisBottom(xScale);
var yAxis = d3.axisLeft(yScale);

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

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

步骤六：添加标题和标签

最后，我们可以添加标题和标签来让散点图更加完整。

svg.append("text")
  .attr("x", 250)
  .attr("y", 20)
  .text("散点图");

svg.append("text")
  .attr("x", 250)
  .attr("y", 520)
  .text("x 轴");

svg.append("text")
  .attr("transform", "rotate(-90)")
  .attr("x", -250)
  .attr("y", 20)
  .text("y 轴");