D3.js 教程

什么是D3？

D3即 数据驱动文档 （Data-Driven Documents），它是由Mike Bostock开发的开源JavaScript库，可使用SVG、HTML和CSS在Web浏览器中创建自定义交互式数据可视化。

在现今数据大爆炸的时代，数据可视化是传达信息的最有效方式之一。D3提供了许多方便和灵活性，可以帮助用户轻松地创建自定义的数据可视化。它非常动态和直观，使用起来很容易。与Protovis类似，但D3更加注重交互、转换和变换。

官方网站: d3js.org

使用 Web 标准 ： D3 是一个非常强大的可视化工具，用于创建交互式数据可视化。它利用现代网络标准：SVG、HTML 和 CSS 来创建数据可视化。
数据驱动 ： D3 是数据驱动的。它可以使用静态数据或从远程服务器获取不同格式的数据，如数组、对象、CSV、JSON、XML 等，以创建不同类型的图表。
DOM 操作 ： D3 允许您根据数据操作文档对象模型 (DOM)。
数据驱动元素 ：它使您的数据能够动态生成元素并将样式应用于元素，无论是表格、图形还是任何其他 HTML 元素和/或元素组。
动态属性 ： D3 可以灵活地为其大部分函数提供动态属性。属性可以指定为数据的函数。这意味着您的数据可以驱动您的风格和属性。
可视化类型 ：对于 D3，没有标准的可视化格式。但它使您能够创建从 HTML 表格到饼图，从图形和条形图到地理空间地图的任何内容。
自定义可视化 ：由于 D3 使用 Web 标准，因此您可以完全控制可视化功能。
Transitions ： D3 提供了 transition() 函数。这非常强大，因为在内部，D3 计算出在您的值之间进行插值并找到间歇状态的逻辑。
交互和动画 ： D3 通过 duration()、delay() 和 ease() 等函数为动画提供了强大的支持。从一种状态到另一种状态的动画快速响应用户交互。

D3.js 是一个 Javascript 库。因此，它可以与您选择的任何 JS 框架一起使用，例如 Angular.js、React.js 或 Ember.js。
D3 专注于数据，因此它是最适合和专业的数据可视化工具。
D3 是开源的。因此您可以使用源代码并添加您自己的功能。
它适用于 Web 标准，因此除了浏览器之外，您不需要任何其他技术或插件即可使用 D3。
D3 适用于 HTML、CSS 和 SVG 等 Web 标准，在 D3 上工作不需要新的学习或调试工具。
D3 不提供任何特定功能，因此它使您可以完全控制您的可视化，以按照您想要的方式对其进行自定义。这使其比 Tableau 或 QlikView 等其他流行工具更具优势。
由于 D3 是轻量级的，并且直接与 Web 标准一起工作，因此速度非常快并且可以很好地处理大型数据集。

访问 D3 Gallery 查看更多可视化示例。