ipad - D3 フォース有向グラフ: 複雑なグラフでのパフォーマンスの問題

Question

ノードとしての反応角と、境界の端でそれらを結合するリンクを持つ D3 力有向グラフを作成しました。四角形に従って div を配置する必要があるため、svg1 に 2 つの svg とリンクを作成し、z-index に合わせて作成しました。その上に div があり、div の上に四角形/ノードを含む 2 番目の 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"); });
   }
 });