2

我用 javascript 编写了这段代码，使用 D3 为网站制作动画，有点像“类似原子”的核心。最终效果就像我一样，但每次我尝试用 chrome 打开它时都会崩溃。

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

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

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

这是一个证明这一观察的演示。

只需更改milliseconds您的第二个setInterval（创建圈子）并自己查看。确保您保持此值大于或等于该transition().duration值。

另外，一个友好的提示：考虑使用 d3 enter, update,exit技术。for这将帮助您在很大程度上避免过时的循环。

于 2014-01-30T07:46:33.077 回答