将d3.js图保持在拖动的位置

Question

我创建了d3.js图形，当它渲染很多时间时，矩形重叠。如果我拖动并移动它们，那么只要我离开鼠标它们就会回到相同的位置。

有没有办法让他们留在我离开的地方？

目前的代码如下：

<script>
                                  var graph = {
                                      "nodes" : [{"name" : "User Login"},{"name" : "Appointments"},{"name" : "Store Visit"},{"name" : "Visit History"},{"name" : "Resume Store Visit"}], 
                                      "links" : [{"source":"Store Visit","target":"Appointments","value":6},
                                                 {"source":"Appointments","target":"Visit History","value":7},
                                                 {"source":"Visit History","target":"Store Visit","value":2},
                                                 {"source":"Resume Store Visit","target":"Visit History","value":1},
                                                 {"source":"Appointments","target":"Resume Store Visit","value":5},
                                                 {"source":"Visit History","target":"Resume Store Visit","value":1},
                                                 {"source":"Resume Store Visit","target":"Appointments","value":3},
                                                 {"source":"User Login","target":"Appointments","value":56},
                                                 {"source":"Appointments","target":"Store Visit","value":8},
                                                 {"source":"Visit History","target":"Visit History","value":1}]
                                                };



                                  var data;// a global
                                  d3.json("http://127.0.0.1:7101/MUDRESTService/rest/v1/userflowlinks?onlyData=true&limit=99", function (error, json) {
                                      data = json;

                                      var gLinks = JSON.stringify(data.items);
                                      gLinks = gLinks.replace(/Source/g,'source');
                                      gLinks = gLinks.replace(/Target/g,'target');
                                      gLinks = gLinks.replace(/Value/g,'value');
                                      var arr = JSON.parse(gLinks);
                                      console.log("gLinks:" + arr);
                                         var width = 960, height = 500;


                                  var color = d3.scale.category20();

                                  var force = d3.layout.force().charge( - 120).linkDistance(300).size([width, height]);

                                  var svg = d3.select("body").append("svg").attr("width", width).attr("height", height);

                                  gLinks = arr.map(function(l) {
                                      var sourceNode = graph.nodes.filter(function(n) {
                                          return n.name === l.source;
                                        })[0],
                                        targetNode = graph.nodes.filter(function(n) {
                                          return n.name === l.target;
                                        })[0];

                                      return {
                                        source: sourceNode,
                                        target: targetNode,
                                        value: l.value
                                      };
                                    });



                                  force.nodes(graph.nodes).links(gLinks).start();

                                  svg.append("svg:defs").selectAll("marker").data(["end"])// Different link/path types can be defined here
                                    .enter().append("svg:marker")// This section adds in the arrows
                                    .attr("id", String).attr("viewBox", "0 -5 10 10")
                                    .attr("refX", 15).attr("refY",  - 1.5).attr("markerWidth", 6).attr("markerHeight", 6).attr("orient", "auto")
                                    .append("svg:path").attr("d", "M0,-5L10,0L0,5");

                                  var link = svg.selectAll(".link").data(gLinks).enter().append("line")
                                                .attr("class", "link").attr("marker-end", "url(#end)")
                                                .style("stroke-width", function (d) {
                                                        if(d.value < 10)
                                                          return "2";
                                                        else
                                                          return "5";

                                                       // return Math.sqrt(d.value);
                                                        //return "2";
                                                  });

                                  var node = svg.selectAll(".node").data(graph.nodes).enter().append("g").attr("transform", function (d) {
                                      return "translate(" + d.x + "," + d.y + ")";
                                  }).call(force.drag);

                                  node.append("rect").attr("class", "node").attr("width", 120).attr("height", 35).style("fill", function (d) {
                                      return "#f8f8f8";//return color(d.group);
                                  }).style("stroke", "black").style("stroke-width", "1px");

                                  node.append("text").text(function (d) {
                                      return d.name;
                                  }).style("font-size", "12px").attr("dy", "1em");

                                 node.append("text").text(function(d) {
                                          //filter out all the links which has this node as source or target
                                          var flinks = gLinks.filter(function(link){
                                            return (link.source.name == d.name || link.target.name == d.name);
                                          });
                                          //all links which has the nodes in source or target
                                          //console.log(flinks[0].value);
                                          return d.name + " (" + flinks[0].value+")";
                                }).style("font-size", "12px").attr("dy", "1em");

                                  force.on("tick", function () {
                                      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;
                                      });

                                      node.attr("transform", function (d) {
                                          return "translate(" + d.x + "," + d.y + ")";
                                      });
                                  });
                                  });


                                </script>