JavaScriptCollection
diff --git a/‎examples/force/cluster.html‎
Lines changed: 3 additions & 30 deletions b/‎examples/force/cluster.html‎
Lines changed: 3 additions & 30 deletions
diff --git a/‎examples/force/force.js‎
Lines changed: 2 additions & 1 deletion b/‎examples/force/force.js‎
Lines changed: 2 additions & 1 deletion
diff --git a/‎examples/force/layout.js‎
Lines changed: 36 additions & 0 deletions b/‎examples/force/layout.js‎
Lines changed: 36 additions & 0 deletions
@@ -157,34 +157,6 @@
   return curve(d.path); // 0.8
 }
 
-function drag(n) {
-  var active = null;
-  n.on("mouseover", function(d) { if (d != active) d.fixed = true; })
-   .on("mouseout", function(d) { if (d != active) d.fixed = false; })
-   .on("mousedown", function(d) {
-    if (d3.event.preventDefault) { d3.event.preventDefault(); }
-    active = d;
-
-    // unregister drag listeners
-    body.on("mouseup", function(d) {
-      active = null;
-      body.on("mouseup", noop)
-          .on("mousemove", noop);
-    });
-
-    // update node position on drag
-    body.on("mousemove", function() {
-      if (active == null) return false;
-      var m = d3.svg.mouse(vis[0][0]);
-      active.x = m[0];
-      active.y = m[1];
-      force.resume(); // restart annealing
-    });
-
-    return false;
-  });
-}
-
 // --------------------------------------------------------
 
 var body = d3.select("body");
@@ -251,11 +223,12 @@
       .attr("r", function(d) { return d.size ? d.size + dr : dr+1; })
       .attr("cx", function(d) { return d.x; })
       .attr("cy", function(d) { return d.y; })
-      .call(drag)
       .on("dblclick", function(d) {
         if (d.size) { expand[d.group] = true; init(); }
       });
-  node = nodeg.selectAll("circle.node");
+
+  node = nodeg.selectAll("circle.node")
+      .call(force.drag);
 
   force.on("tick", function() {
     if (!hull.empty()) {
 
@@ -30,7 +30,8 @@ d3.json("miserables.json", function(json) {
       .attr("cx", function(d) { return d.x; })
       .attr("cy", function(d) { return d.y; })
       .attr("r", 5)
-      .style("fill", function(d) { return fill(d.group); });
+      .style("fill", function(d) { return fill(d.group); })
+      .call(force.drag);
 
   vis.attr("opacity", 0)
     .transition()
 
@@ -153,5 +153,41 @@ function layout_force() {
     return force;
   };
 
+  // use `node.call(force.drag)` to make nodes draggable
+  force.drag = function() {
+    var node, element;
+
+    this
+      .on("mouseover", function(d) { d.fixed = true; })
+      .on("mouseout", function(d) { if (d != node) d.fixed = false; })
+      .on("mousedown", mousedown);
+
+    d3.select(window)
+      .on("mousemove", mousemove)
+      .on("mouseup", mouseup);
+
+    function mousedown(d) {
+      (node = d).fixed = true;
+      element = this;
+      d3.event.preventDefault();
+    }
+
+    function mousemove() {
+      if (!node) return;
+      var m = d3.svg.mouse(element);
+      node.x = m[0];
+      node.y = m[1];
+      force.resume(); // restart annealing
+    }
+
+    function mouseup() {
+      if (!node) return;
+      mousemove();
+      node = element = null;
+    }
+
+    return force;
+  };
+
   return force;
 }