D3转换循环抛出Uncaught TypeError：t.call不是函数 [英] D3 transition looping throwing Uncaught TypeError: t.call is not a function

问题描述

对D3来说非常新，而且一般来说对JS来说相对较新。我试图在点击上创建一个圆圈，一旦创建该圆圈需要反复脉动。现在，它正在被正确创建并且它进行了一次转换，但是由于错误它会死掉。这是我的代码：

Very new to D3 and relatively new to JS in general. I am trying to create a circle on click, and that circle once created needs to repeatedly pulsate forever. Right now, it is being created properly and it does the transition one time, but then it sort of dies due to the error. Here is my code:

var shapesAtt = shapes
    // omitted: assigning fill, position, etc; working as intended
    .on("click", circleMouseClick);

function circleMouseClick(d, i)
{
    createPulse(this);
}

function createPulse(focusElement)
{
    // takes in "focal circle" element
    // some things here are hard coded for ease of reading 
    // (i.e. these variables aren't all useless)

    var focus = d3.select(focusElement);
    var origR = focus.attr("r");
    var origX = focus.attr("cx");
    var origY = focus.attr("cy");
    var origFill = focus.style("fill");

    var strokeColor = "black";

    var newG = svgContainer.append("g");
    var pulser = newG.append("circle").attr("id", "pulser")
        .style("fill", "none").style("stroke", strokeColor)
        .attr("cx", 150).attr("cy", 150)
        .attr("r", origR)
        .transition()
            .duration(2000)
            .each(pulsate);
}

function pulsate()
{
    var pulser = d3.select(this);
    pulser = pulser
        .transition().duration(2000)
            .attr("r", 25)
            .attr("stroke-width", 50)
        .transition().duration(2000)
            .attr("r", 90)
            .attr("stroke-width", 10)
        .each("end", pulsate);
}

我在Chrome上运行时收到的错误是：

The error I'm receiving when running in Chrome is:

Uncaught TypeError: t.call is not a function     d3.v4.min.js:4

我认为我的代码部分问题是：

The portion of my code I think it's taking issue with is:

function pulsate()
{
    // ...   
    .each("end", pulsate);
}

推荐答案

这是因为你正在使用d3版本4。 v4 API发生了重大变化，因此：

This is because you are using d3 version4. There has been a major change in the v4 API, so:

而不是使用

// ...   
.each("end", pulsate);//in d3 version 3

做

// ...   
.on("end", pulsate);//in d3 version 4

参考： https://github.com/d3/d3-transition#transition_on

这篇关于D3转换循环抛出Uncaught TypeError：t.call不是函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！