D3.js-Data-Driven Documents

1- D3.js

1- 前言

D3.js（Data-Driven Documents）是一个强大的JavaScript库，用于创建动态和交互式的数据可视化图表。本文将通过一个详细的教程，带你一步步学习如何使用D3.js进行数据可视化。

2- 准备工作

在开始之前，你需要确保以下环境已经准备好：

文本编辑器：如VS Code、Sublime Text等。
Web浏览器：如Chrome、Firefox等。
D3.js库：可以通过CDN引用最新版本。

2.1- 步骤一：创建基本HTML文件

首先，我们需要创建一个基本的HTML文件，并引用D3.js库。

<!DOCTYPE html>
<html>
<head>
    <title>D3.js Tutorial</title>
    <script src="https://d3js.org/d3.v6.min.js"></script>
</head>
<body>
    <h1>D3.js Tutorial</h1>
    <div id="chart"></div>
</body>
</html>

2.2- 步骤二：选择和绑定数据

在HTML文件中，我们将通过D3.js选择DOM元素并绑定数据。以下是一个简单的示例，展示如何将数据绑定到段落元素上。

<!DOCTYPE html>
<html>
<head>
    <title>D3.js Tutorial</title>
    <script src="https://d3js.org/d3.v6.min.js"></script>
</head>
<body>
    <h1>D3.js Tutorial</h1>
    <div id="chart"></div>
    <script>
        var data = [4, 8, 15, 16, 23, 42];

        d3.select("#chart").selectAll("p")
            .data(data)
            .enter().append("p")
            .text(function(d) { return "I’m number " + d + "!"; });
    </script>
</body>
</html>

2.3- 步骤三：创建SVG容器

SVG（Scalable Vector Graphics）是D3.js绘制图形的主要方式。我们需要创建一个SVG容器来放置我们的图形元素。

<!DOCTYPE html>
<html>
<head>
    <title>D3.js Tutorial</title>
    <script src="https://d3js.org/d3.v6.min.js"></script>
</head>
<body>
    <h1>D3.js Tutorial</h1>
    <div id="chart"></div>
    <script>
        var width = 500;
        var height = 500;

        var svg = d3.select("#chart").append("svg")
            .attr("width", width)
            .attr("height", height);
    </script>
</body>
</html>

2.4- 步骤四：绘制简单图形

在SVG容器中，我们可以绘制各种图形，如矩形、圆形等。以下是一个绘制圆形的示例。

<!DOCTYPE html>
<html>
<head>
    <title>D3.js Tutorial</title>
    <script src="https://d3js.org/d3.v6.min.js"></script>
</head>
<body>
    <h1>D3.js Tutorial</h1>
    <div id="chart"></div>
    <script>
        var width = 500;
        var height = 500;

        var svg = d3.select("#chart").append("svg")
            .attr("width", width)
            .attr("height", height);

        svg.append("circle")
            .attr("cx", 250)
            .attr("cy", 250)
            .attr("r", 50)
            .attr("fill", "blue");
    </script>
</body>
</html>

2.5- 步骤五：使用比例尺

比例尺用于将数据值映射到视觉属性上，如颜色、位置和大小。以下示例展示了如何使用线性比例尺。

<!DOCTYPE html>
<html>
<head>
    <title>D3.js Tutorial</title>
    <script src="https://d3js.org/d3.v6.min.js"></script>
</head>
<body>
    <h1>D3.js Tutorial</h1>
    <div id="chart"></div>
    <script>
        var width = 500;
        var height = 500;

        var svg = d3.select("#chart").append("svg")
            .attr("width", width)
            .attr("height", height);

        var scaleLinear = d3.scaleLinear()
            .domain([0, 100])
            .range([0, width]);

        svg.append("rect")
            .attr("x", scaleLinear(10))
            .attr("y", 50)
            .attr("width", scaleLinear(30))
            .attr("height", 100)
            .attr("fill", "green");
    </script>
</body>
</html>

2.6- 步骤六：绘制条形图

接下来，我们将绘制一个简单的条形图。条形图是数据可视化中最常见的图表之一。

<!DOCTYPE html>
<html>
<head>
    <title>D3.js Tutorial</title>
    <script src="https://d3js.org/d3.v6.min.js"></script>
</head>
<body>
    <h1>D3.js Tutorial</h1>
    <div id="chart"></div>
    <script>
        var data = [4, 8, 15, 16, 23, 42];
        var width = 500;
        var height = 500;
        var barWidth = width / data.length;

        var svg = d3.select("#chart").append("svg")
            .attr("width", width)
            .attr("height", height);

        var y = d3.scaleLinear()
            .domain([0, d3.max(data)])
            .range([height, 0]);

        svg.selectAll("rect")
            .data(data)
            .enter().append("rect")
            .attr("x", function(d, i) { return i * barWidth; })
            .attr("y", function(d) { return y(d); })
            .attr("width", barWidth - 1)
            .attr("height", function(d) { return height - y(d); })
            .attr("fill", "steelblue");
    </script>
</body>
</html>

2.7- 步骤七：添加坐标轴

坐标轴是图表中不可或缺的一部分。D3.js提供了方便的坐标轴生成器。

<!DOCTYPE html>
<html>
<head>
    <title>D3.js Tutorial</title>
    <script src="https://d3js.org/d3.v6.min.js"></script>
</head>
<body>
    <h1>D3.js Tutorial</h1>
    <div id="chart"></div>
    <script>
        var data = [4, 8, 15, 16, 23, 42];
        var width = 500;
        var height = 500;
        var barWidth = width / data.length;

        var svg = d3.select("#chart").append("svg")
            .attr("width", width)
            .attr("height", height);

        var y = d3.scaleLinear()
            .domain([0, d3.max(data)])
            .range([height, 0]);

        var x = d3.scaleBand()
            .domain(data.map(function(d, i) { return i; }))
            .range([0, width])
            .padding(0.1);

        var xAxis = d3.axisBottom(x);
        var yAxis = d3.axisLeft(y);

        svg.selectAll("rect")
            .data(data)
            .enter().append("rect")
            .attr("x", function(d, i) { return x(i); })
            .attr("y", function(d) { return y(d); })
            .attr("width", x.bandwidth())
            .attr("height", function(d) { return height - y(d); })
            .attr("fill", "steelblue");

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

        svg.append("g")
            .call(yAxis);
    </script>
</body>
</html>

3- 总结

通过以上步骤，你已经学会了如何使用D3.js创建基本的可视化图表。D3.js提供了丰富的API和功能，可以帮助你创建复杂和交互式的数据可视化图表。继续深入学习，你将能够掌握更多高级技巧和应用场景。

#编程

#d3.js

Python项目开发完整流程上一篇

VS Code的Continue插件下一篇