2016-07-27 6 views
15

D3では非常に新しく、一般的にJSでは比較的新しいです。私はクリックでサークルを作成しようとしています。作成したサークルは永遠に繰り返し脈動する必要があります。今、それは正しく作成されており、一度の移行を行いますが、エラーのために一種の死ぬことになります。ここに私のコードは次のとおりです。D3遷移ループ投げUncaught TypeError:t.callは関数ではありません

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

答えて

28

これは、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

+0

作品!本当にありがとう! – veileddreamer

関連する問題