d3.js数据可视化从入门到放不下（一）_d3js大数据可视化-优快云博客

本文介绍了d3.js的基本概念和数据驱动文档的思想。在大数据时代，d3.js为前端工程师提供了强大的组件，用于创建直观的数据可视化效果。文章还讨论了为何选择d3.js而非其他库，并讲解了如何搭建本地HTTP服务器以及d3.js中的选集概念，包括如何使用它们进行页面元素的操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

背景

D3：指数据驱动文档（Data-Drive Document），D3严格遵循Web标准；
d3.js：可以把D3理解为一种思路或者说是“风格”，d3.js正是基于这种“风格”开发的JavaScript库。

说到JavaScript的库，就不得不提起jQuery，作为最知名的JavaScript库，没有之一。即使是在现今前端主流SPA框架盛行的情况下，它仍然有这不可替代的地位。它提供了及其简便的API来替代原生JavaScript中低难度却高度重复的DOM操作方法。

同样，d3.js也是一个JavaScript库，它提倡用数据来操作文档的思想。

在大数据时代，如果说对海量数据的爬取、挖掘，以及清洗和分析是服务端工程师必须要掌握的技能。那对于前端工程师？作为离用户最近的程序员，前端工程师的职责便是该以何种方式将海量数据更好、更直观的呈现在用户面前。HTML5给我们提供了强大的Canvas组件，让前端界面元素的展示拥有了更多可能性。大名鼎鼎的Echarts便是基于此来实现的。

之所以选择d3.js而不是Echarts原因在于，Echarts作为应用及其广泛的开源的图表组件库，我们无需关注其底层实现逻辑，多数情况下，只要知道如何应用就好。正因如此，它虽然提供了丰富的组件，但是在灵活性方面稍显不足。d3.js更偏底层基础，我们可能用它在页面上实现无限可能，它可以让我们随心所欲的绘制我们真正想要的图标或是效果。

搭建基本环境

为了模拟真实的开发环境并方便后续的开发，推荐搭建一个简易的本地HTTP服务器。
安装http-server模块：

npm install http-server -g

上面命令行中的-g参数为把http-server设置为全局模块，这样至于要你需要的位置执行：

http-server

命令即可在当前目录架起一个建议的HTTP服务。

基本概念

选集：用来定位页面上的特定视觉元素，类似于jQuery的选择器。事实上，具体语法也差不多，比如：

<p id='target'></p>
<script>
	d3.select('p#target').text('Hello world!')
</script>

上面的示例代码展示了如何用d3.js来向页面输入文字。这里发现，它了jQuery的语法实在是太像了。它也有和jQuery类似的一些内置API：
* seleection.attr函数：用来读取或改变元素上的给定属性；
* selection.classed函数：用来添加、删除选定元素上的css class
* selection.style函数：用来给指定元素添加指定样式
甚至你还可以像jQuery一样的来链式调用这些方法：

d3.select('p#target').text('hello world!').classed('content-box', true);

进入-更新-退出（enter-update-exit）模式：
用这个模式来完成一个基本的图表展示操作：

<script type="text/javascript">
    var data = [10, 15, 30, 50, 80, 65, 55, 30, 20, 10, 8]; // <- A

    function render(data) { // <- B
        // Enter
        d3.select("body").selectAll("div.h-bar") // <- C
            .data(data) // <- D
            .enter() // <- E
                .append("div") // <- F
                    .attr("class", "h-bar")
                .append("span"); // <- G

        // Update
        d3.select("body").selectAll("div.h-bar")
            .data(data) 
                .style("width", function (d) { // <- H
                    return (d * 3) + "px";
                })
                .select("span") // <- I
                    .text(function (d) {
                        return d;
                    });
                
        // Exit
        d3.select("body").selectAll("div.h-bar")
            .data(data)
            .exit() // <- J
                .remove();        
    }

    setInterval(function () { // <- K
        data.shift();
        data.push(Math.round(Math.random() * 100));
        render(data);
    }, 1500);

    render(data);
</script>