2

D3 を使用してこのコードを JavaScript で記述し、「atom-looklike」コアのような Web サイトのアニメーションを作成しました。最終的な効果は私とまったく同じですが、クロムで開こうとするたびにクラッシュします。

問題は「translateAlong」機能にあると確信しています。何か案は？

これがスクリプトCoreです。通常、しばらくするとクラッシュします。待つだけです。

何かアイデアはありますか？ありがとう！

編集: Firefox はクラッシュしません。

<!DOCTYPE html>
<meta charset="utf-8">
<body>
<script src="d3.v3.min.js"></script>
<script>

var divWidth = window.innerWidth - 25;
var divHeight = window.innerHeight - 25;

var svg = d3.select("body").append("svg")
.style("background-color", "#000000")
       .attr("width", divWidth)
       .attr("height", divHeight);


var sampleData=new Array();

var lineFunction = d3.svg.line()
    .x(function(d) { return d.x; })
    .y(function(d) { return d.y; })
    .interpolate("basis-closed");

sampleData = [];    

var r = 40;
var count = 0;
var n = 8;  
var paths= new Array();

for(var i=0;i<n;i++)
{
    paths[i] = svg.append("path")
    .attr("stroke", "white")
    .attr("stroke-width", 1)
    .attr("fill", "none");
}   
var xapp,yapp;



setInterval(function()
{       
    for(var j=0;j<n;j++)
    {
        sampleData = [];
        for(var i=0;i<5;i++)
        {
            xapp = (divWidth/2 + Math.cos((i*(2*Math.PI/10)))*r)+Math.random()*r*2-r;
            yapp = (divHeight/2 + Math.sin((i*(2*Math.PI/10)))*r)+Math.random()*r*2-r;
            sampleData[i] = [xapp,yapp];
        }
        paths[j]
      .data([sampleData])
      .transition()
      .duration(300)
      .ease("linear")
      .attr("d", d3.svg.line()
      .interpolate("basis-closed"));
    }
}, 200);

setInterval(function()
{   
    for(var i=0;i<n;i++)
    {
        svg.append("circle")
          .attr("r", 2)
          .style("fill","white")
          .style("stroke","white")              
          .transition()
          .duration(2000)
          .ease("linear")
          .attrTween("transform",translateAlong(paths[i].node()))
          .each("end", function() { 
                          d3.select(this).remove(); })
    }
}, 300);

function translateAlong(path) {
    var l = path.getTotalLength();
    return function(d, i, a) {
        return function(t) {
            var p = path.getPointAtLength(t * l);
            return "translate(" + p.x + "," + p.y + ")";
        };
    };
}  
</script>
4

1 に答える 1

1

古い要素を破壊するよりも早く新しい要素を作成しています!

コードを確認してください。間隔circleは 300 ミリ秒ごとに要素の作成をトリガーしますが、円は 2000 ミリ秒のトランジションが完了したときにのみ削除されます。したがって、既存のサークルが削除されるまでに、少なくとも 6 つの新しいサークルが作成されます。

これは、この観察結果を証明するデモです。

milliseconds2番目のsetInterval（円を作成する）を変更して、自分の目で確かめてください。この値を 値以上に保つようにしてくださいtransition().duration。

また、フレンドリーなヒント: d3 enter, update,exitテクニックの使用を検討してください。forこれにより、時代遅れのループを大幅に回避できます。

于 2014-01-30T07:46:33.077 に答える