D3.js v4中如何实现带过渡动画的长轴标签换行？

我之前也碰到过类似的困扰，D3 v4和v3在过渡机制与轴元素渲染的时机上存在明显差异，这就是导致你代码在v3正常、v4失效的核心原因。

问题根源 #

在D3 v3中，transition().call(xAxis)是同步完成轴元素（包括tick文本）的渲染的，所以你紧接着链式调用.selectAll(".tick text").call(wrap...)时，能精准选中已经生成的文本元素。但到了v4，过渡的处理逻辑变得更异步——轴的tick元素是在过渡的帧周期里逐步创建的，当你在transition().call(xAxis)之后直接调用选择器时，这些tick文本可能还没被渲染出来，自然无法执行换行逻辑。

解决方案：利用过渡结束事件 #

我们可以监听过渡的end事件，等轴的过渡动画完全完成、所有tick元素都生成后，再执行文本换行的处理。修改后的代码如下：

svg.append("g")
  .attr("class", "x axis")
  .attr("transform", "translate(0," + height + ")")
  .transition()
  .call(xAxis)
  // 监听过渡结束事件，此时轴元素已完全生成
  .on("end", function() {
    // 选中当前轴容器下的所有tick文本，执行换行
    d3.select(this).selectAll(".tick text")
      .call(wrap, x.bandwidth());
  });

额外说明 #

如果你使用的是D3 v5及以上版本，这个逻辑同样适用——因为从v4开始，D3的过渡机制就采用了异步帧处理的模式。另外要确保你的wrap函数逻辑正确，比如计算文本宽度、拆分换行的逻辑适配v4的比例尺方法（你已经替换成x.bandwidth()，这部分是对的）。

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