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

时间:2017-08-31 13:39:33

标签: node.js reactjs d3.js

我正在重构从v3到v4的图表应用程序

  1. “TypeError:callback.call不是函数”
  2. 这是代码 - 但我不确定为什么会导致callback.call错误?

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

    enter image description here

    我认为这是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 宽松功能有所改变吗?

1 个答案:

答案 0 :(得分:-2)

我没有看到该特定代码行有什么问题,但我想知道错误是否为waveGroup的值。在d3中,有时很容易混淆哪些方法返回选择而哪些方法没有。我的猜测是waveGroup没有在运行时引用选择。