D3中的脚本.js使Chrome崩溃

Script in D3.js make Chrome crash

本文关键字：Chrome 崩溃 js 脚本 D3      更新时间：2023-09-26

我用 JavaScript 编写了这段代码，使用 D3 为网站制作动画，类似于"原子样"的核心。最终效果它与我非常相似，但每次我尝试用 chrome 打开它时，它都会崩溃。

我很确定问题出在"翻译"功能上。有什么想法吗？

这是脚本核心，它通常会在一段时间后崩溃，只需要等待。

你有什么想法吗？谢谢！

编辑：火狐不会崩溃。 

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

你创建新元素的速度比摧毁旧元素的速度快！

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

这是一个演示来证明这一观察结果。

刚刚更改了第二个setInterval（创建圆圈）的milliseconds，然后自己看看。确保此值大于或等于transition().duration值。

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

相关文章：