Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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);
}
like image 761
veileddreamer Avatar asked Jul 27 '16 08:07

veileddreamer


1 Answers

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

do

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

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

like image 120
Cyril Cherian Avatar answered Oct 15 '22 13:10

Cyril Cherian