D3 transition looping throwing Uncaught TypeError: t.call is not a function

问题

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);
}

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);
}

回答1:

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

Instead of using

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

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

refer: https://github.com/d3/d3-transition#transition_on

来源：https://stackoverflow.com/questions/38607647/d3-transition-looping-throwing-uncaught-typeerror-t-call-is-not-a-function

标签

javascript

d3.js

d3v4