D3轉換循環投擲Uncaught TypeError：t.call不是一個函數

Question

對D3來說很新穎，對JS來說相對較新。我試圖在點擊時創建一個圈子，並且創建的圈子需要反覆跳動。現在，它正在被正確地創建，並且一次完成了轉換，但是由於錯誤，它會死亡。這裏是我的代碼：

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運行時，我收到的錯誤是：

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

我認爲它採取出具加蓋本我的代碼部分：

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

Answer 1

這是因爲您使用的是d3版本4。已經有V4的API中的重大變化，所以：

而不是使用

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

做

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

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