D3 Transition Looping werfen Uncaught TypeError: t.call ist keine Funktion

Question

Sehr neu zu D3 und relativ neu zu JS im Allgemeinen. Ich versuche, beim Klicken einen Kreis zu erstellen, und dieser einmal erstellte Kreis muss immer wieder für immer pulsieren. Gerade jetzt wird es richtig erstellt und es macht den Übergang einmal, aber dann stirbt es aufgrund des Fehlers. Hier ist mein 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); 
} 

Der Fehler, den ich empfangen werde, wenn in Chrome läuft:

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

Der Teil meines Codes ich denke, es Problem ist unter ist bei:

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

Answer 1

Dies liegt daran, dass Sie d3 version4 verwenden. Es hat eine große Veränderung in der v4 API gewesen, so:

der Verwendung Statt

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

tun

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

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