web-dev-qa-db-ja.com

D3遷移ループがUncaught TypeErrorをスローする：t.callは関数ではありません

D3は非常に新しく、JSは一般的に比較的新しいものです。クリックで円を作成しようとしています。作成した円は、永久に繰り返し脈動する必要があります。現在、それは適切に作成されており、遷移を1回実行しますが、エラーのために一種のダイが停止します。これが私のコードです：

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);
}
javascriptd3.jsd3v4
17
veileddreamer

これは、d3 version4を使用しているためです。 v4 APIに大きな変更が加えられたため、次のようになります。

使用する代わりに

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

行う

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

参照： https://github.com/d3/d3-transition#transition_on

40
Cyril Cherian