如何在D3.js中检测渲染完成事件？

D3本身没有内置的全局渲染完成事件，因为渲染流程完全由你编写的绘制逻辑控制，根据常见的绘制场景，有以下几种可靠的检测方式：

1. 带过渡动画的绘制场景 #

如果你使用D3的transition()方法做入场动效、节点增量渲染，可以监听过渡的end事件，批量节点可以绑定同一个过渡实例来统一监听所有过渡结束：

// 先展示加载动效
d3.select("#loading").style("display", "block");

const svg = d3.select("#chart-container svg");
const nodes = svg.selectAll(".node").data(yourNodeData).join("g").attr("class", "node");
const links = svg.selectAll(".link").data(yourLinkData).join("line").attr("class", "link");

// 定义全局过渡实例
const t = d3.transition()
  .duration(800)
  .on("end", () => {
    // 所有过渡完成后隐藏加载动效
    d3.select("#loading").style("display", "none");
  });

// 节点和连接的渲染都绑定该过渡
links.transition(t)
  .attr("x1", d => d.source.x)
  .attr("y1", d => d.source.y)
  .attr("x2", d => d.target.x)
  .attr("y2", d => d.target.y);

nodes.transition(t)
  .attr("transform", d => `translate(${d.x}, ${d.y})`);

如果是不需要过渡的静态渲染，把过渡duration设为0即可，不会产生动效但依然能触发end事件。

2. 无过渡的静态批量渲染场景 #

如果你的绘制逻辑没有使用transition，是直接同步绘制大量元素，可以利用浏览器的事件循环机制检测渲染完成：

// 展示加载动效
d3.select("#loading").style("display", "block");

// 执行所有D3绘制逻辑
renderAllNodesAndLinks();

// 更精准的方案，优先用requestIdleCallback
if (window.requestIdleCallback) {
  requestIdleCallback(() => {
    d3.select("#loading").style("display", "none");
  });
} else {
  // 兼容方案：setTimeout 0会把逻辑放到当前帧渲染完成后的下一个宏任务执行
  setTimeout(() => {
    d3.select("#loading").style("display", "none");
  }, 0);
}

原理是D3的DOM操作是同步执行的，但浏览器的实际渲染是在当前宏任务执行完成后，上述方法可以刚好捕捉到渲染结束的时机。

3. 力导向图绘制场景 #

如果你绘制的是力导向图，直接监听力模拟的end事件即可：

d3.select("#loading").style("display", "block");

const simulation = d3.forceSimulation(nodes)
  .force("link", d3.forceLink(links).id(d => d.id))
  .force("charge", d3.forceManyBody())
  .force("center", d3.forceCenter(width / 2, height / 2))
  .on("end", () => {
    // 力模拟计算完成、所有节点位置固定后隐藏加载动效
    d3.select("#loading").style("display", "none");
  });

如果需要展示力导向图的动态布局过程，只在初始渲染完成后隐藏加载态，可以监听tick事件，第一次tick执行完成后就可以隐藏加载动效。

内容的提问来源于stack exchange，提问作者Kirill