d3.js 是一款流行的 JavaScript 数据可视化库。它提供了强大的数据处理和 DOM 操作能力，可以帮助前端开发人员轻松地创建各种图表和可视化效果。
在使用 d3.js 时，我们通常需要在 DOM 加载完毕后才能对其进行操作。document.onReady 或 $(document).ready() 是在 jQuery 中常用的方法，用于确保 DOM 加载完成后再运行 JavaScript 代码。那么，在 d3.js 中如何使用 document.onReady 呢？
使用 document.onReady
d3.js 提供了一个方便的方法 d3.select() 来选择 DOM 元素，并执行一些操作。为了确保 DOM 加载完成后再运行这个方法，我们可以使用 document.onReady。
document.addEventListener("DOMContentLoaded", function(){
// 在此处编写 d3.js 代码
d3.select("body")
.append("h1")
.text("Hello, world!");
});上面的代码会在页面加载完成后，在 body 元素中添加一个 h1 标题，显示 "Hello, world!"。
如果你使用的是 jQuery，也可以使用简洁的语法来实现同样的效果：
$(function(){
// 在此处编写 d3.js 代码
d3.select("body")
.append("h1")
.text("Hello, world!");
});这段代码与前面的纯 JavaScript 代码效果相同。
指导意义
使用 document.onReady 可以确保 DOM 加载完成后再运行 JavaScript 代码，避免出现因为代码执行过早而导致的错误。
此外，在编写 d3.js 代码时，我们还需要注意以下几点：
- 熟悉 d3.js 的常用方法和语法；
- 确定清晰的数据结构和数据处理流程；
- 根据需要选择合适的图表类型和可视化效果。
总之，d3.js 是一款非常强大的数据可视化库，使用 document.onReady 可以帮助我们更好地利用它的功能，创造出更加丰富和生动的可视化效果。
示例代码
下面是一个简单的示例，展示如何使用 d3.js 和 document.onReady 创建一个饼图：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------ ------------
-------
------
---- ----------- -------------------
------- ---------------------------------------------
--------
--------------------------------------------- -----------
-- --
--- ---- - ---- --- --- ----
-- -----
--- ----- - -----------------
-------------
------------------ ---------- ---------- ------------
-- ----
--- --- - --------
---------------
------------------
-- -----
--- --- - ---------
-- --- --
--- --- - -----------------
-- ----
---------------------
----------------
-----------------------
---------- ----
------------- ----------- - ------ -------------- ---
---
---------
-------
-------上面的代码会在页面加载完成后，在一个 200x200 的 SVG 容器中绘制一个简单的饼图。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/29057