D3 chuyển tiếp looping ném Uncaught LoạiError: t.call không phải là một chức năng

Question

Rất mới đến D3 và tương đối mới cho JS nói chung. Tôi đang cố gắng tạo ra một vòng tròn trên nhấp chuột, và vòng tròn đó một khi được tạo ra cần phải lặp lại nhiều lần mãi mãi. Ngay bây giờ, nó đang được tạo ra đúng cách và nó chuyển đổi một lần, nhưng sau đó nó sắp chết do lỗi. Đây là mã của tôi:

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

Các lỗi Tôi nhận được khi chạy trong Chrome là:

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

Phần mã của tôi, tôi nghĩ rằng nó lấy vấn đề với là:

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

Answer 1

Điều này là do bạn đang sử dụng phiên bản d34. Hiện đã có một sự thay đổi lớn trong API v4, vì vậy:

Thay vì sử dụng

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

làm

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

tham khảo: https://github.com/d3/d3-transition#transition_on