D3.js 教程

D3.js 是一个强大的JavaScript库，用于创建交互式数据可视化。在这个教程中，我们将学习如何使用D3.js进行基本的数据可视化。

基础概念

1. 选择器

在D3.js中，选择器用于选择HTML或SVG元素。以下是一些常用的选择器：

d3.select()：选择第一个匹配的元素。
d3.selectAll()：选择所有匹配的元素。

2. 数据绑定

数据绑定是D3.js的核心概念之一。它允许我们将数据与DOM元素进行绑定。

d3.select("body").selectAll("div").data([5, 10, 15]).enter().append("div").text(function(d) { return d; });

3. 轴和比例尺

轴和比例尺用于将数据映射到视觉元素。

var x = d3.scaleLinear().domain([0, 10]).range([0, 100]);
var y = d3.scaleLinear().domain([0, 10]).range([100, 0]);

实践案例

以下是一个使用D3.js创建简单折线图的例子：

d3.csv("/en/tools/visualization/data/example.csv", function(data) {
  var x = d3.scaleLinear().domain([0, 10]).range([0, 100]);
  var y = d3.scaleLinear().domain([0, 10]).range([100, 0]);

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

  d3.select("svg").append("path")
    .datum(data)
    .attr("d", line);
});

学习资源

想要深入了解D3.js，可以参考以下资源：

希望这个教程能够帮助你入门D3.js！😊