Ipad D3力有向图：复杂图中的性能问题

我创建了一个D3力有向图，其中有作为节点的反应物和在周长末端连接它们的链接。 因为我需要根据矩形对齐div，所以我在svg1和acc to z-index中创建了两个svg和链接，上面是div，上面是包含矩形/节点的第二个svg（不透明度为0，因此div可见）。 我遇到的问题是，IPAD中的图形速度很慢，而且它的浏览器在打开绘制图形的页面时，会将大约80%的次数最小化。调试时，我发现问题出在我的tick函数上，它的代码在这里

force.start();
q = d3.geom.quadtree(nodes),count=0;
// define what to do one each tick of the animation
force.on("tick", function() {
    i = 0;
    //applying collision detection to avoid overlapping by default
    if(!mapCreated){
       while (++i < nodes.length) q.visit(collide(nodes[i]));
    }

    //this checks if node tries to move out (limitToCorners does that)
    node.attr("x", function(d) { return d.x = limitToCorners(d.x,"x"); })
    .attr("y", function(d) { return d.y = limitToCorners(d.y,"y"); });

    //this puts the link attribute to link directly to center of rectangle
    link.attr("x1", function(d) { return d.source.x+nodeModel.width/2; })
    .attr("y1", function(d) { return d.source.y+nodeModel.height/2; })
    .attr("x2", function(d) { return d.target.x+nodeModel.width/2; })
    .attr("y2", function(d) { return d.target.y+nodeModel.height/2; });

    //changing the CSS so that divs are in same place as the nodes
    changeGoalsPosition(refList);

    // changing the attributes of lines on svg so that it comes to the end of rectange (calculateLinkEndPoints does that)
   for(i=0;i<lines.length;i++){
      var obj = {};
      obj.source = {
            x: parseInt(linksRefList[i].attr("x1")),
            y: parseInt(linksRefList[i].attr("y1"))
      };
      obj.target = {
        x: parseInt(linksRefList[i].attr("x2")),
        y: parseInt(linksRefList[i].attr("y2"))
      };
      $(lines[i]).attr("x1", function(d) { return calculateLinkEndPoints(obj,"sx"); })
      .attr("y1", function(d) { return calculateLinkEndPoints(obj,"sy"); })
      .attr("x2", function(d) { return calculateLinkEndPoints(obj,"tx"); })
      .attr("y2", function(d) { return calculateLinkEndPoints(obj,"ty"); });
   }
 });    

force.start（）；
q=d3.geom.quadtree（节点），计数=0；
//在动画的每个勾号中定义要执行的操作
force.on（“勾号”，函数（）{
i=0；
//默认情况下，应用碰撞检测以避免重叠
如果（！mapCreated）{
而（++i对于（i=0；i您在
勾选
函数中进行的处理非常昂贵。您基本上有两个选项


减少要处理的节点数
减少
勾选事件的处理次数


你是否可以做前者取决于你的应用程序。对于后者，你可以做类似这样的事情来跳过其他事件

var process = 1;
force.on("tick", function() {
    if(process) {
        // do processing
    }
    process = 1 - process;
});

当然，你可以以类似的方式跳过更多的事件。在某个时候，你可能会注意到布局变得“跳跃”由于跳过了事件。您可以通过使用转换而不是简单地设置元素，将元素移动到其新位置来缓解此问题。
您在
勾选功能中执行的处理相当昂贵。您基本上有两个选项


减少要处理的节点数
减少
勾选事件的处理次数


你是否可以做前者取决于你的应用程序。对于后者，你可以做类似这样的事情来跳过其他事件

var process = 1;
force.on("tick", function() {
    if(process) {
        // do processing
    }
    process = 1 - process;
});

当然，你可以以类似的方式跳过更多的事件。在某个时候，你可能会注意到布局变得“跳跃”由于跳过了事件。您可以通过使用转换将元素移动到新位置而不是简单地设置它们来缓解此问题。
感谢您的帮助。.节点数大约为50，这是我需要处理的最小值。此外，我还使用css设置了div的css（{'top'：y，'left'：'x'））。你能告诉我如何使用转换或提供链接吗？…设置这些属性没有什么特别的。你可以像其他任何东西一样转换它们。你能告诉我为什么ipad中的safari一直在最小化。它不能处理每个刻度上的这么多计算吗？对不起，不知道--我真的没有这方面的经验ipad开发。实际上，这就是整个滞后和缓慢问题的根源。仍然会实现你所说的。谢谢你的帮助伙伴…谢谢你的帮助。节点数量大约是50个，这是我需要处理的最小数量。我还使用css设置了div的css（{'top'：y，'left'：'x'））。你能告诉我如何使用转换或提供链接吗？…设置这些属性没有什么特别的。你可以像其他任何东西一样转换它们。你能告诉我为什么ipad中的safari一直在最小化。它不能处理每个刻度上的这么多计算吗？对不起，不知道--我真的没有这方面的经验ipad开发。事实上，这就是整个滞后和缓慢问题的根源。我们仍将实施你所说的。谢谢你的帮助，伙计。。。