CODEWITHSUNDEEP
javascriptgoogle-chromecrashd3.js
user2791645
user2791645

Reputation: 21

Script in D3.js make Chrome crash

I have written this code in javascript using D3 to make an animation for a website, somthing like an "atom-looklike" core. The final effect it's exacly like i would but every time i try to open it with chrome it crashes.

I'm pretty sure the problem is in the "translateAlong" function. Any ideas?

here is the script Core , it usually crashes after a while, just have to wait.

Have you got any ideas? thank you!

Edit: Firefox doesn't crashes. 

<!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>

Upvotes: 2

Views: 1823

Answers (1)

Vikram Deshmukh
Vikram Deshmukh

Reputation: 15636

You are creating new elements faster than you are destroying old ones!

Check your code. Your interval triggers circle element creation every 300 milliseconds whereas the circles get removed only on completing a 2000 milliseconds long transition. So, by the time an existing circle is removed, at least 6 new circles are created.

Here's a demo proving this observation.

Just changed the milliseconds of your second setInterval (that creates circles) and see for yourself. Ensure that you keep this value greater than or equal to the transition().duration value.

Also, a friendly tip: Consider using d3 enter, update, exit technique. That will help you avoid out-of-fashion for loops to a large extent.

Upvotes: 1

Related Questions