d3 сила направленного графа, перемещающаяся на svg, разделяющая на группу узлов.

Question

График направленной силы рисуется правильно. Но он не остается на месте. Я немного перемещаюсь здесь и там на svg, иногда некоторые узлы исчезают из видимости, оставляя кластеры узлов здесь и там. Это как граф изначально выглядит: позже

Некоторое время он выглядит следующим образом: узлы пошли, где каждый от DIV

var graph = new Object(); 
var map = new Object(); 
var index = 0; 

var linkIndex = 0; 

var width = $("#d3graph").width(); 
var height = $("#d3graph").height() ; 


var svg = d3.select("#d3graph").append("svg:svg") 
     .attr("width", width) 
     .attr("height", height); 

// tool tip with the label 
var tip = d3.tip() 
     .attr('class', 'd3-tip') 
     .offset([-10, 0]) 
     .html(function (d) { 
      return d.name + ""; 
     }) 
svg.call(tip); 

/* I take nodes and edges from outside. That part works fine*/ 

graph.links = dataset2; 
graph.nodes = dataset1; 

function drapGraph(graph) { 

    svg.selectAll("g.link").remove(); 
    svg.selectAll("g.gnode").remove(); 

    var force = self.force = d3.layout.force() 
      .nodes(graph.nodes) 
      .links(graph.links) 
      .gravity(.05) 
      .distance(30) 
      .charge(-120) 
      .size([width, height]) 
      .start(); 

    //map radius domain--> range 
    var rScale = d3.scale.linear() 
      .domain([d3.min(graph.nodes, function (d) { 
       return Math.log(d.group); 
      }), d3.max(graph.nodes, function (d) { 
       return Math.log(d.group); 
      })]) 
      .range([0, 30]); 

    var link = svg.selectAll(".link") 
      .data(graph.links) 
      .enter().append("line") 
      .attr("class", "link") 
      .style("stroke-width", 2) 
      .style("stroke-length", function (d) {return (10000/d.value);}); 

    var node = svg.selectAll("g.gnode") 
      .data(graph.nodes) 
      .enter().append("g") 
      .attr("class", "gnode") 
      .on('mouseover', tip.show) 
      .on('mouseout', tip.hide) 
      .call(force.drag); 

    var maxretweets = d3.max(graph.nodes, function (d) { 
     return Math.log(d.group); 
    }); 
    var minretweets = d3.min(graph.nodes, function (d) { 
     return Math.log(d.group); 
    }); 
    var maxContent = d3.max(graph.nodes, function (d) { 
     return d.degree; 
    }); 
    var minvalue = d3.min(graph.links, function (d) { 
     return d.value; 
    }); 

    var circle = node.append("circle") 
      .attr("r", function (d) { 
       return rScale(Math.log(d.group)); 
      }) 
      .style("fill", function (d) { 
       return d.color; 

      }) 
      .style("stroke", "#000000") 
      .on('mouseover', tip.show) 
      .on('mouseout', tip.hide) 
      .call(force.drag); 

    //give you nodes with labels 
    var label = node.append("text") 
      .style("font-family", "sans-serif") 
      .style("text-anchor", "middle") 
      .style("font-size", "8") 
      .style("stroke", "#404040") 
      .text(function (d) { 
       if (rScale(Math.log(d.group)) > 5) { 
        return d.name; 
       } 
      }); 



    force.on("tick", function() { 

     node.attr("cx", function (d) { 
      return d.x; 
     }) 
     .attr("cy", function (d) { 
      return d.y; 
     }); 

     circle.attr("cx", function (d) { 
      return d.x; 
     }) 
     .attr("cy", function (d) { 
      return d.y; 
     }); 

     label.attr("x", function (d) { 
      return d.x; 
     }) 
     .attr("y", function (d) { 
      return d.y; 
     }); 

     link.attr("x1", function (d) { 
      return d.source.x; 
     }) 
     .attr("y1", function (d) { 
      return d.source.y; 
     }) 
     .attr("x2", function (d) { 
      return d.target.x; 
     }) 
     .attr("y2", function (d) { 
      return d.target.y; 
     }); 
    }); 

    svg.selectAll("g").attr("x", function (d) { 
            return d.x; 
          }) 
         .attr("y", function (d) { 
           return d.y; 
           }); 
} 

Может кто-то помочь мне решить эту проблему? Здесь есть небольшая проблема, но я не мог этого понять, я пробовал столько всего, но все равно не работает.

Answer 1

Я предлагаю использовать ограниченные значения x и y для устранения таких проблем.

Попробуйте рассчитать x и y позиции в тике, как показано ниже.

node.attr("cx", function(d) { return d.x = Math.max(radius, Math.min(width - radius, d.x)); }) 
    .attr("cy", function(d) { return d.y = Math.max(radius, Math.min(height - radius, d.y)); }); 

См. here для образца.

Редактировать: Нет необходимости обновлять круг и текстовые позиции отдельно, так как они сгруппированы. Просто нужно обновить элементы группы и ссылки следующим образом.

force.on("tick", function() { 
    svg.selectAll("g.node") 
     .attr("transform", function (d) { 
      d.x = Math.max(radius, Math.min(width - radius, d.x)); 
      d.y = Math.max(radius, Math.min(height - radius, d.y)); 
      return "translate("+d.x+","+d.y+")"; 
     }); 

    link.attr("x1", function (d) { 
      return d.source.x; 
     }) 
     .attr("y1", function (d) { 
      return d.source.y; 
     }) 
     .attr("x2", function (d) { 
      return d.target.x; 
     }) 
     .attr("y2", function (d) { 
      return d.target.y; 
     }); 
    }); 
}