D3 Pętla przejściowa rzucanie Uncaught TypeError: t.call nie jest funkcją

Question

Bardzo nowy w D3 i stosunkowo nowy w JS w ogóle. Próbuję stworzyć koło na kliknięcie, a ten utworzony okrąg musi wielokrotnie pulsować na zawsze. W tej chwili jest właściwie tworzony i dokonuje przejścia jeden raz, ale potem umiera z powodu błędu. Tu jest mój kodu:

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

Błąd Otrzymuję gdy działa w Chrome:

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

Część mojego kodu myślę, że polemizując ze jest:

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

Answer 1

Dzieje się tak, ponieważ używasz wersji 3 d3. Nastąpiła istotna zmiana w API v4, więc:

Zamiast

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

zrobić

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

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