D3.js基础散点图教程

D3.js是一个强大的JavaScript库，可以让您使用HTML、SVG和CSS创建动态交互式数据可视化。在本篇教程中，我们将学习如何使用D3.js创建一个基本散点图。

散点图介绍

散点图由多个数据点组成，每个数据点都由一对X和Y坐标表示。X轴通常用来表示独立变量，而Y轴通常用来表示因变量。散点图可以通过颜色、大小、形状等各种方式呈现更多信息，帮助观察者更好地理解数据。

创建散点图

接下来，我们将使用D3.js来创建一个基本散点图。

准备工作

首先，我们需要准备一些数据，这里我们使用随机生成的二维数据集：

var dataset = [];
for (var i = 0; i < 100; i++) {
    var x = Math.random() * 9 + 1;
    var y = 100 - Math.floor(Math.random() * 90 + 5);
    dataset.push([x, y]);
}

上述代码中，我们生成了一个包含100个数据点的数组，每个数据点有两个值：x和y坐标。其中x为1到10之间的随机数，y为5到95之间的随机数。

创建画布

接下来，我们需要创建一个SVG画布来绘制散点图：

var padding = 30;
var svgWidth = 600;
var svgHeight = 400;

var svg = d3.select("body")
    .append("svg")
    .attr("width", svgWidth)
    .attr("height", svgHeight)
    .style('border', '1px solid #999999');

上述代码中，定义了画布的大小和留白，然后使用D3.js的选择器方法选择了body元素，并添加了一个SVG元素。

创建比例尺

接下来，我们需要为x和y坐标创建比例尺，以将数据点的位置映射到适当的位置：

var xScale = d3.scaleLinear()
    .domain([0, d3.max(dataset, function(d) { return d[0]; })])
    .range([padding, svgWidth - padding]);

var yScale = d3.scaleLinear()
    .domain([0, d3.max(dataset, function(d) { return d[1]; })])
    .range([svgHeight - padding, padding]);

上述代码中，我们使用d3.scaleLinear()函数创建线性比例尺。domain表示输入范围，即数据集中x或y坐标的最小值和最大值；range表示输出范围，即屏幕上该轴的起始和结束位置。这个过程使得我们能够将数据点转换为在画布内可视化的坐标。

添加散点元素

现在，我们已经准备好将数据点绘制为散点了：

var dots = svg.selectAll(".dot")
    .data(dataset)
    .enter().append("circle")
    .attr("class", "dot")
    .attr("r", 5)
    .attr("fill", "#69b3a2")
    .attr("cx", function(d) { return xScale(d[0]); })
    .attr("cy", function(d) { return yScale(d[1]); });

上述代码中，我们使用D3.js的selectAll()和data()方法选择所有圆圈（如果不存在，则创建一个），然后将数据集绑定到这些圆圈上。在此之后，我们使用enter()和append()创建新的圆圈，并设置它们的类、半径、填充颜色以及X和Y坐标。

创建坐标轴

最后一步是为画布添加坐标轴：

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

svg.append("g")
    .attr("class", "x-axis")
    .attr ("transform", "translate(0," + (svgHeight - padding) + ")")
    .call(xAxis);

svg.append("g")
    .attr("class", "y-axis")
    .attr("transform", "translate(" + padding + ",0)")
    .call(yAxis);

上述代码中，我们使用d3.axisBottom()和d3.axisLeft()函数创建了X和Y坐标轴。接着，我们使用SVG元素的append()方法将其添加到画布上，并使用D3.js的attr()方法设置相关属性。

现在，我们已经完成了我们的散点图！将所有代码置于一起，您可以得到以下完整的D3.js基础散点图：

var dataset = [];
for (var i = 0; i < 100; i++) {
    var x = Math.random() * 9 + 1;
    var y = 100 - Math.floor(Math.random() * 90 + 5);
    dataset.push([x, y]);
}

var padding = 30;
var svgWidth = 600;
var svgHeight = 400;

var xScale = d3.scaleLinear()
    .domain([0, d3.max(dataset, function(d) { return d[0]; })])
    .range([padding, svgWidth - padding]);

var yScale = d3.scaleLinear()
    .domain([0, d3.max(dataset, function(d) { return d[1]; })])
    .range([svgHeight - padding, padding]);

var svg = d3.select("body")
    .append("svg")
    .attr("width", svgWidth)
    .attr("height", svgHeight)
    .style('border', '1px solid #999999')

var dots = svg.selectAll(".dot")
    .data(dataset)
    .enter().append("circle")
    .attr("class", "dot")
    .attr("r", 5)
    .attr("fill", "#69b3a2")
    .attr("cx", function(d) { return xScale(d[0]); })
    .attr("cy", function(d) { return yScale(d[1]); });

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

svg.append("g")
    .attr("class", "x-axis")
    .attr("transform", "translate(0," + (svgHeight - padding) + ")")
    .call(xAxis);

svg.append("g")
    .attr("class", "y-axis")
    .attr("transform", "translate(" + padding + ",0)")
    .call(yAxis);

总结

在本教程中，我们介绍了如何使用D3.js创建一个基础的散点图。我们学习了准备数据集、创建画布、比例尺、散点元素和坐标轴等必要步骤。您可以根据自己的需要定制化这个散点图，例如添加颜色、大小、形状等元素，以便更好地传达数据信息。

scqilin.github.io/d3js/basic-…

【d3.js入门】基本散点图