d3过渡不是一个功能

Question

我的D3代码有问题.

const hexagon = this.hexagonSVG.append('path')
  .attr('id', 'active')
  .attr('d', lineGenerator(<any>hexagonData))
  .attr('stroke', 'url(#gradient)')
  .attr('stroke-width', 3.5)
  .attr('fill', 'none')

const totalLength = (<any>hexagon).node().getTotalLength()

const _transition = this.d3.transition()
  .duration(DASH_ANIMATION)
  .ease(this.d3.easeLinear)

hexagon
  .attr('stroke-dasharray', totalLength + ' ' + totalLength)
  .attr('stroke-dashoffset', totalLength)
  .attr('stroke-dashoffset', 0)
  .transition(_transition)

这个代码在将近6个月的时间里运行良好,但今天出现了一个错误.

"hexagon.attr(...).attr(...).attr(...).transition不是函数"

有人可以告诉我如何解决这个问题吗？谢谢.

Answer 1

供将来参考：我遇到了类似的问题，似乎是 webpack、yarn 和 d3-transition 之间的问题。后者扩展了 d3-selection 的功能，这会以某种方式在 yarn.lock 文件中产生多个 d3-selection 版本（如本期所述）。

在我的情况下，明确添加 d3-selection，删除锁定文件然后yarn install再次运行修复了问题。

似乎 d3-transition 的每次更新都会重现这个问题。