d3.js v3 到 v4 错误 - 动画和文本上下文

Question

我正在将一个图表应用程序从 v3 重构到 v4

1. “TypeError：callback.call 不是函数”

这是代码——但我不确定为什么会导致 callback.call 错误？

waveGroup.attr('transform','translate('+waveGroupXPosition+','+waveRiseScale(0)+')')

---

我认为这个 animateWave 代码有问题

            // Data for building the clip wave area.
            var data = [];
            for(var i = 0; i <= 40*waveClipCount; i++){
                data.push({x: i/(40*waveClipCount), y: (i/(40))});
            }
var clipArea = d3.area()

        var wave = waveGroup.append("path")
            .datum(data)
            .attr("d", clipArea)
            .attr("T", 0);


        function animateWave() {
            wave.attr('transform','translate('+waveAnimateScale(wave.attr('T'))+',0)');

            wave.transition()
                .duration(config.waveAnimateTime * (1-wave.attr('T')))
                .ease('linear')
                .attr('transform','translate('+waveAnimateScale(1)+',0)')
                .attr('T', 1)
                .each('end', function(){
                    wave.attr('T', 0);
                    animateWave(config.waveAnimateTime);
                });
        }

我认为我需要重构它——所以它更像这样

function repeat() {
  timeCircle
    .attr('cx', 210)          // position the circle at 40 on the x axis
    .attr('cy', (yPos*45)+25) // position the circle at 250 on the y axis
    .transition()             // apply a transition
    .ease(easement)           // control the speed of the transition
    .duration(4000)           // apply it over 2000 milliseconds
    .attr('cx', 720)          // move the circle to 920 on the x axis
    .transition()             // apply a transition
    .ease(easement)           // control the speed of the transition
    .duration(4000)           // apply it over 2000 milliseconds
    .attr('cx', 210)          // return the circle to 40 on the x axis
    .on("end", repeat);       // when the transition finishes start again
};

https://bl.ocks.org/d3noob/1ea51d03775b9650e8dfd03474e202fe 缓动功能改变了吗？

Answer 1

我看不出该特定代码行有什么问题，但我想知道错误是否与 waveGroup 的值有关。在 d3 中，有时很容易混淆哪些方法返回选择，哪些不返回。我的猜测是waveGroup 不指代运行时的选择。