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

크롬에서 실행 때 받고있어 오류는 다음과 같습니다 :

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

내가 함께 문제를 가지고 생각 내 코드의 일부입니다 :

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

Answer 1

여기 내 코드입니다

d3 version4를 사용하고 있기 때문입니다. 그래서, V4의 API에 큰 변화가 있었다 :

대신

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

가 참조 할

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

를 사용 : 마법처럼 https://github.com/d3/d3-transition#transition_on