window.onload = function(){

  var w = 500,

      h = 500;

    var svg = d3.select("#svgContent")

                  .append("svg")

                  .attr("width", w)

                  .attr("height", h)

                  .attr('preserveAspectRatio', 'xMinYMin slice') 

                  .append('g');

    var dataSet = {

            nodes: [

              { name: "Sara", id:"1", x:239.31191418045182, y:296.78520431471384, fixed:true},

              { name: "Raul", id:"2", x:261.1651006560272, y:200.78448049334696, fixed:true},

              { name: "Stefano", id:"3", fixed:false},

              { name: "Michele", id:"4", fixed:false}

            ],

            edges: [

              { source: 0, target: 1 },

              { source: 1, target: 0 },

              { source: 1, target: 2 },

              { source: 2, target: 1 },

              { source: 2, target: 3 }

            ]

        };

        var force = self.force = d3.layout.force()

            .nodes(dataSet.nodes)

            .links(dataSet.edges)

            .gravity(0.05)

            .distance(100)

            .charge(-100)

            .size([w,h])

            .start();

​

        var link = svg.selectAll(".link")

            .data(dataSet.edges)

            .enter().append("line")

            .attr("class", "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; });

        var node_drag = d3.behavior.drag()

            .on("dragstart", dragstart)

            .on("drag", dragmove)

            .on("dragend", dragend);

​

        var node = svg.selectAll("circle")

            .data(dataSet.nodes)

            .enter().append("circle")

            .attr("class", "node")

            .attr("r", 4.5)

            .call(node_drag);

        function dragstart(d, i) {

            force.stop(); // stops the force auto positioning before you start dragging

        }

​

        function dragmove(d, i) {

            d.px += d3.event.dx;

            d.py += d3.event.dy;

            d.x += d3.event.dx;

            d.y += d3.event.dy; 

            tick(); 

        }

​

        function dragend(d, i) {

            d.fixed = true; // of course set the node to fixed so the force doesn't include the node in its auto positioning stuff

            tick();

            force.resume();

        }

        force.on("tick", tick);

​

        function tick() {

          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("cx", function(d) { return d.x; })

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

        }

};

​

​