freeCodeCamp/guide/chinese/d3/index.md

---
title: D3
localeTitle: D3
---
# D3：数据驱动文档

**数据驱动文档** （D3.js）是一个JavaScript库，用于在Web浏览器中生成动态，交互式数据可视化。 **D3.js** API包含的各种方法，可以分为以下逻辑单元 - _选择_ ， _转换_ ， _数组_ ， _数学_ ， _颜色_ ， _比例_ ， _SVG_ ， _时间_ ， _布局_ ， _地理_ ， _几何_ ， _行为_ 。

![D3.js标志](https://i2.wp.com/pbiswas101.files.wordpress.com/2018/07/d3.jpg?w=312&h=161)

**D3.js**通过将强大的可视化和交互技术与数据驱动的DOM操作方法相结合，帮助您实现数据的可视化。通过为您的数据设计正确的可视界面，以提供现代浏览器的所支持的全部功能。

**D3.js**版本1.0.0于2011年2月18日发布。

## 为什么使用D3.js？

_D3_ \*没有引入新的视觉表现。与**Processing** ， **Raphaël**或**Protovis不同** ， _D3的_图形标记词汇直接来自Web标准：HTML，SVG和CSS - https://d3js.org/

###### 入门

有超过20,000多个**D3.js的**例子供您参考，学习，而且大都非常实用！所以，您要问的问题是 - 如何从第一原理构建可视化？正如您可能已经了解的那样，D3的API非常庞大，所以我们可以提供一些在早期特别有用的实用工具：

*   **D3级**

![](https://i0.wp.com/pbiswas101.files.wordpress.com/2018/07/scale.png?w=400&h=100)

*   **D3型**

![](https://i0.wp.com/pbiswas101.files.wordpress.com/2018/07/shape.png?w=400&h=100)

*   **D3选择**

![](https://i0.wp.com/pbiswas101.files.wordpress.com/2018/07/selection.gif?w=400&h=100)

*   **D3收集**

![](https://i0.wp.com/pbiswas101.files.wordpress.com/2018/07/collection.png?w=400&h=100)

*   **D3层次**

![](https://i2.wp.com/pbiswas101.files.wordpress.com/2018/07/hierarchy.png?w=400&h=100)

*   **D3变焦**

![](https://i1.wp.com/pbiswas101.files.wordpress.com/2018/07/zoom.gif?w=400&h=100)

*   **D3力**

![](https://i1.wp.com/pbiswas101.files.wordpress.com/2018/07/force.gif?w=400&h=100)

只需要了解一些HTML5功能的基本知识，例如SVG，Canvas，您就可以深入了解像**D3.js**这样的库将数据变为现实的世界！ 

###### 贡献

*   https://github.com/d3/
    
    ### 资源
    
*   https://en.wikipedia.org/wiki/D3.js
    
*   https://en.wikipedia.org/wiki/Document_Object_Model
    
*   http://blockbuilder.org/search
    
*   https://d3indepth.com/
    
*   https://davidwalsh.name/learning-d3
    

* * *