从绘图到交互：d3.js带你开启数据可视化之旅

2023-11-02 20:54:22

在之前学习了d3.js的基本语法和套路后，我们现在将正式进入SVG的概念。SVG（Scalable Vector Graphics）是一种可缩放矢量图形，它是由W3C颁布的一种成熟标准，用于规范网络上的矢量图形。

SVG与传统的位图格式（如JPEG、PNG）不同，它使用可扩展的XML格式来图像。这意味着SVG图形可以无限放大而不失真，非常适合创建交互式可视化。

d3.js库提供了丰富的SVG元素，我们可以使用这些元素轻松创建各种各样的图表和图形。在本文中，我们将使用d3.js库来构建一个平面直角坐标系。

首先，我们需要创建一个SVG元素。我们可以使用d3.select()方法来选择一个现有的SVG元素，或者使用d3.create()方法来创建一个新的SVG元素。

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

接下来，我们需要创建一个组元素来容纳坐标轴和数据点。我们可以使用d3.append()方法来创建一个组元素。

var g = svg.append("g")
    .attr("transform", "translate(50, 50)");

现在，我们可以使用d3.scaleLinear()方法来创建两个比例尺，分别用于x轴和y轴。

var xScale = d3.scaleLinear()
    .domain([0, 10])
    .range([0, 400]);

var yScale = d3.scaleLinear()
    .domain([0, 10])
    .range([400, 0]);

接下来，我们可以使用d3.axisBottom()方法和d3.axisLeft()方法来创建x轴和y轴。

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

最后，我们可以使用d3.append()方法将x轴和y轴添加到组元素中。

g.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0, 400)")
    .call(xAxis);

g.append("g")
    .attr("class", "y axis")
    .call(yAxis);

现在，我们的平面直角坐标系就创建好了。我们可以使用d3.line()方法来创建一条线段，并使用d3.append()方法将线段添加到组元素中。

var line = d3.line()
    .x(function(d) { return xScale(d.x); })
    .y(function(d) { return yScale(d.y); });

g.append("path")
    .attr("class", "line")
    .attr("d", line(data));