D3.js学习总结

最新推荐文章于 2026-04-14 11:11:59 发布

原创最新推荐文章于 2026-04-14 11:11:59 发布 · 3.6k 阅读

3 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#javascript #d3.js

javascript 专栏收录该内容

24 篇文章

订阅专栏

本文详细介绍了如何使用D3.js构建可视化环境，并通过实例展示了绘制条形图的过程。从环境搭建到具体代码实现，涵盖了D3.js的核心用法，包括连缀语法和数据驱动的DOM操作。

D3.js是一个JavaScript库，它可以通过数据来操作文档。D3可以通过使用HTML、SVG和CSS把数据鲜活形象地展现出来。同时，它提供了强大的可视化组件，可以让使用者以数据驱动的方式去操作DOM。（维基百科）

简言之，D3是目前最流行的可视化库之一，它利用现有的Web标准，通过更简单的（数据驱动）方式来制作炫目的可视化效果。D3 的主要作者是才华横溢的Mike Bostock，此外还有几位贡献者。这个项目完全是开源的，托管在GitHub 上（https://github.com/mbostock/d3/），任何人都可以自由使用。

D3 的许可方式是BSD，因此无论你出于商业还是非商业目的使用、修改和整合它，都不用付出任何代价。

下面是我在学习d3过程中的一些总结，希望能对大家有帮助。

一搭建D3开发环境

可以在http://d3js.org/下载最新版本的D3.js，也可以在https://github. com/mbostock/d3/tags下载之前的版本。另外，如果你对开发中的最新D3版本感兴趣，可以fork以下的代码库https://github.com/mbostock/d3。

下载和解压后，我们得到了3个文件：d3.js、d3.min.js和许可证文件。在开发过程中，建议使用d3.js，这样可以深入到D3库中跟踪调试JavaScript代码。当然也可以使用“瘦身”版本的d3.min.js，加载速度比较快。

在服务器目录文件夹下（我的是xampp下的htdocs）先建立一个新文件夹，保存项目文件，比如LearnD3。在这个文件夹里，最好再创建一个子文件夹叫d3，把d3.js保存在这个子文件夹中。

在项目文件夹中创建一个HTML文件index.html，代码如下：

<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset="utf-8">
    <title>LearnD3</title>
    <script type="text/javascript" src="d3/d3.js"></script>
</head>
<body>
    <script type="text/javascript">
        //你的D3代码
    </script>
</body>
</html>

第一个script标签设定了对d3.js的引用。第二个script标签在body中，是需要自己编码的地方。

比如我写了如下代码来绘制条形图：

//Width and height
var w = 500;        
var h = 100;
var barPadding = 1;

var dataset = [ 5, 10, 13, 19, 21, 25, 22, 18, 15, 13, 11, 12, 15, 20, 18, 17, 16, 18, 23, 25 ];    

//Create SVG element
var svg = d3.select("body")
.append("svg")
            .attr("width", w)
            .attr("height", h);

svg.selectAll("rect")
.data(dataset)
    .enter()
    .append("rect")
    .attr("x", function(d, i) {
        return i * (w / dataset.length);
    })
    .attr("y", function(d) {
        return h - (d * 4);
    })
    .attr("width", w / dataset.length - barPadding)
    .attr("height", function(d) {
        return d * 4;
    })
    .attr("fill", function(d) {
        return "rgb(0, 0, " + (d * 10) + ")";
    });

svg.selectAll("text")
    .data(dataset)
    .enter()
    .append("text")
    .text(function(d) {
        return d;
    })
    .attr("text-anchor", "middle")
    .attr("x", function(d, i) {
        return i * (w / dataset.length) + (w / dataset.length - barPadding) / 2;
    })
    .attr("y", function(d) {
        return h - (d * 4) + 14;
    })
    .attr("font-family", "sans-serif")
    .attr("font-size", "11px")
    .attr("fill", "white");

从上面代码可以看出，D3利用了一种叫连缀语法的技术，通过用句点把方法“连缀”在一起，一行代码能执行多个操作。

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

D3.js学习总结

一 搭建D3开发环境

一搭建D3开发环境