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转换之间的问题。后者扩展了d3选择的功能，从而以某种方式在yarn.lock文件中导致了多个d3选择版本（如this issue中所述）。

就我而言，明确添加d3-selection，删除锁定文件，然后再次运行yarn install可以解决此问题。

似乎每次d3转换的更新都会重现此问题。

Answer 2

当我使用import * as d3 from 'd3';和个人import { select } from 'd3-selection'混合时遇到了这个问题。我仅通过使用单个导入来克服了这个问题，我想这是建议的处理方式。

d3过渡不是一个功能

2 个答案: