Question

我已经使用D3在javascript中编写了这段代码，为一个网站制作动画，就像一个“原子外观”的核心。最后的效果就像我想的那样，但每当我尝试用它打开它时它会崩溃。

我很确定问题出在“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>

Answer 1

您创建新元素的速度要快于破坏旧元素的速度！

检查您的代码。您的间隔每300毫秒触发circle元素创建，而圆圈仅在完成2000毫秒长的转换时被删除。因此，在删除现有圆圈时，至少会创建6个新圆圈。

Here's a demo证明了这一点。

刚刚更改了您的第二个milliseconds的{{1}}（创建了圈子）并自行查看。 确保您将此值保持为大于或等于setInterval值。

另外，友情提示：请考虑使用d3 transition().duration，enter，update技术。这将有助于您在很大程度上避免不合时宜的exit循环。

D3.js中的脚本使Chrome崩溃

1 个答案:

您创建新元素的速度要快于破坏旧元素的速度！