Fil · July 28, 2020 10:43 · Jul 28, 2020 · Jul 4, 2016 · Jul 4, 2016 · May 14, 2016
diff --git a/index.html b/index.html
@@ -33,7 +33,6 @@
 
 d3.select(canvas)
     .call(d3.drag()
-        .container(canvas)
         .subject(dragsubject)
         .on("start", dragstarted)
         .on("drag", dragged)

diff --git a/index.html b/index.html
@@ -63,7 +63,7 @@
 }
 
 function dragstarted() {
-  if (!d3.event.active) simulation.alphaTarget(0.3).restart()
+  if (!d3.event.active) simulation.alphaTarget(0.3).restart();
   d3.event.subject.fx = d3.event.subject.x;
   d3.event.subject.fy = d3.event.subject.y;
 }

diff --git a/index.html b/index.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <meta charset="utf-8">
 <canvas width="960" height="960"></canvas>
-<script src="https://d3js.org/d3.v4.0.0-alpha.40.min.js"></script>
+<script src="https://d3js.org/d3.v4.min.js"></script>
 <script>
 
 var n = 20;
@@ -64,16 +64,19 @@
 
 function dragstarted() {
   if (!d3.event.active) simulation.alphaTarget(0.3).restart()
-  simulation.fix(d3.event.subject);
+  d3.event.subject.fx = d3.event.subject.x;
+  d3.event.subject.fy = d3.event.subject.y;
 }
 
 function dragged() {
-  simulation.fix(d3.event.subject, d3.event.x, d3.event.y);
+  d3.event.subject.fx = d3.event.x;
+  d3.event.subject.fy = d3.event.y;
 }
 
 function dragended() {
   if (!d3.event.active) simulation.alphaTarget(0);
-  simulation.unfix(d3.event.subject);
+  d3.event.subject.fx = null;
+  d3.event.subject.fy = null;
 }
 
 function drawLink(d) {

diff --git a/index.html b/index.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <meta charset="utf-8">
 <canvas width="960" height="960"></canvas>
-<script src="https://d3js.org/d3.v4.0.0-alpha.39.min.js"></script>
+<script src="https://d3js.org/d3.v4.0.0-alpha.40.min.js"></script>
 <script>
 
 var n = 20;
@@ -31,6 +31,14 @@
     width = canvas.width,
     height = canvas.height;
 
+d3.select(canvas)
+    .call(d3.drag()
+        .container(canvas)
+        .subject(dragsubject)
+        .on("start", dragstarted)
+        .on("drag", dragged)
+        .on("end", dragended));
+
 function ticked() {
   context.clearRect(0, 0, width, height);
   context.save();
@@ -50,6 +58,24 @@
   context.restore();
 }
 
+function dragsubject() {
+  return simulation.find(d3.event.x - width / 2, d3.event.y - height / 2);
+}
+
+function dragstarted() {
+  if (!d3.event.active) simulation.alphaTarget(0.3).restart()
+  simulation.fix(d3.event.subject);
+}
+
+function dragged() {
+  simulation.fix(d3.event.subject, d3.event.x, d3.event.y);
+}
+
+function dragended() {
+  if (!d3.event.active) simulation.alphaTarget(0);
+  simulation.unfix(d3.event.subject);
+}
+
 function drawLink(d) {
   context.moveTo(d.source.x, d.source.y);
   context.lineTo(d.target.x, d.target.y);

diff --git a/index.html b/index.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <meta charset="utf-8">
 <canvas width="960" height="960"></canvas>
-<script src="https://d3js.org/d3.v4.0.0-alpha.38.min.js"></script>
+<script src="https://d3js.org/d3.v4.0.0-alpha.39.min.js"></script>
 <script>
 
 var n = 20;
@@ -23,7 +23,7 @@
 
 var simulation = d3.forceSimulation(nodes)
     .force("charge", d3.forceManyBody().strength(-30))
-    .force("link", d3.forceLink(links).distance(20).iterations(12))
+    .force("link", d3.forceLink(links).strength(1).distance(20).iterations(10))
     .on("tick", ticked);
 
 var canvas = document.querySelector("canvas"),

diff --git a/index.html b/index.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <meta charset="utf-8">
 <canvas width="960" height="960"></canvas>
-<script src="https://d3js.org/d3.v4.0.0-alpha.35.min.js"></script>
+<script src="https://d3js.org/d3.v4.0.0-alpha.38.min.js"></script>
 <script>
 
 var n = 20;
@@ -23,7 +23,7 @@
 
 var simulation = d3.forceSimulation(nodes)
     .force("charge", d3.forceManyBody().strength(-30))
-    .force("link", d3.forceLink(links).distance(20).iterations(10))
+    .force("link", d3.forceLink(links).distance(20).iterations(12))
     .on("tick", ticked);
 
 var canvas = document.querySelector("canvas"),

diff --git a/index.html b/index.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <meta charset="utf-8">
 <canvas width="960" height="960"></canvas>
-<script src="https://d3js.org/d3.v4.0.0-alpha.33.min.js"></script>
+<script src="https://d3js.org/d3.v4.0.0-alpha.35.min.js"></script>
 <script>
 
 var n = 20;

diff --git a/index.html b/index.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <meta charset="utf-8">
 <canvas width="960" height="960"></canvas>
-<script src="https://d3js.org/d3.v4.0.0-alpha.32.min.js"></script>
+<script src="https://d3js.org/d3.v4.0.0-alpha.33.min.js"></script>
 <script>
 
 var n = 20;

diff --git a/index.html b/index.html
@@ -1,17 +1,12 @@
 <!DOCTYPE html>
 <meta charset="utf-8">
 <canvas width="960" height="960"></canvas>
-<script src="https://d3js.org/d3-array.v0.7.min.js"></script>
-<script src="https://d3js.org/d3-collection.v0.1.min.js"></script>
-<script src="https://d3js.org/d3-dispatch.v0.4.min.js"></script>
-<script src="https://d3js.org/d3-quadtree.v0.7.min.js"></script>
-<script src="https://d3js.org/d3-timer.v0.4.min.js"></script>
-<script src="https://d3js.org/d3-force.v0.4.min.js"></script>
+<script src="https://d3js.org/d3.v4.0.0-alpha.32.min.js"></script>
 <script>
 
 var n = 20;
 
-var nodes = d3_array.range(n * n).map(function(i) {
+var nodes = d3.range(n * n).map(function(i) {
   return {
     index: i
   };
@@ -26,9 +21,9 @@
   }
 }
 
-var simulation = d3_force.forceSimulation(nodes)
-    .force("charge", d3_force.forceManyBody().strength(-30))
-    .force("link", d3_force.forceLink(links).distance(20).iterations(10))
+var simulation = d3.forceSimulation(nodes)
+    .force("charge", d3.forceManyBody().strength(-30))
+    .force("link", d3.forceLink(links).distance(20).iterations(10))
     .on("tick", ticked);
 
 var canvas = document.querySelector("canvas"),

diff --git a/index.html b/index.html
@@ -6,7 +6,7 @@
 <script src="https://d3js.org/d3-dispatch.v0.4.min.js"></script>
 <script src="https://d3js.org/d3-quadtree.v0.7.min.js"></script>
 <script src="https://d3js.org/d3-timer.v0.4.min.js"></script>
-<script src="https://d3js.org/d3-force.v0.3.min.js"></script>
+<script src="https://d3js.org/d3-force.v0.4.min.js"></script>
 <script>
 
 var n = 20;

diff --git a/index.html b/index.html
@@ -27,9 +27,8 @@
 }
 
 var simulation = d3_force.forceSimulation(nodes)
-    .force("charge", d3_force.forceManyBody().strength(-50))
+    .force("charge", d3_force.forceManyBody().strength(-30))
     .force("link", d3_force.forceLink(links).distance(20).iterations(10))
-    .force("position", d3_force.forcePosition())
     .on("tick", ticked);
 
 var canvas = document.querySelector("canvas"),

diff --git a/.block b/.block
@@ -0,0 +1,2 @@
+license: gpl-3.0
+height: 960
diff --git a/README.md b/README.md
@@ -0,0 +1 @@
+This demonstrates [*forceLink*.iterations](https://github.com/d3/d3-force#link_iterations), which strengthens [d3-force](https://github.com/d3/d3-force)’s link constraint by applying the constraint multiple times per simulation step.
diff --git a/index.html b/index.html
@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<canvas width="960" height="960"></canvas>
+<script src="https://d3js.org/d3-array.v0.7.min.js"></script>
+<script src="https://d3js.org/d3-collection.v0.1.min.js"></script>
+<script src="https://d3js.org/d3-dispatch.v0.4.min.js"></script>
+<script src="https://d3js.org/d3-quadtree.v0.7.min.js"></script>
+<script src="https://d3js.org/d3-timer.v0.4.min.js"></script>
+<script src="https://d3js.org/d3-force.v0.3.min.js"></script>
+<script>
+
+var n = 20;
+
+var nodes = d3_array.range(n * n).map(function(i) {
+  return {
+    index: i
+  };
+});
+
+var links = [];
+
+for (var y = 0; y < n; ++y) {
+  for (var x = 0; x < n; ++x) {
+    if (y > 0) links.push({source: (y - 1) * n + x, target: y * n + x});
+    if (x > 0) links.push({source: y * n + (x - 1), target: y * n + x});
+  }
+}
+
+var simulation = d3_force.forceSimulation(nodes)
+    .force("charge", d3_force.forceManyBody().strength(-50))
+    .force("link", d3_force.forceLink(links).distance(20).iterations(10))
+    .force("position", d3_force.forcePosition())
+    .on("tick", ticked);
+
+var canvas = document.querySelector("canvas"),
+    context = canvas.getContext("2d"),
+    width = canvas.width,
+    height = canvas.height;
+
+function ticked() {
+  context.clearRect(0, 0, width, height);
+  context.save();
+  context.translate(width / 2, height / 2);
+
+  context.beginPath();
+  links.forEach(drawLink);
+  context.strokeStyle = "#aaa";
+  context.stroke();
+
+  context.beginPath();
+  nodes.forEach(drawNode);
+  context.fill();
+  context.strokeStyle = "#fff";
+  context.stroke();
+
+  context.restore();
+}
+
+function drawLink(d) {
+  context.moveTo(d.source.x, d.source.y);
+  context.lineTo(d.target.x, d.target.y);
+}
+
+function drawNode(d) {
+  context.moveTo(d.x + 3, d.y);
+  context.arc(d.x, d.y, 3, 0, 2 * Math.PI);
+}
+
+</script>
diff --git a/preview.png b/preview.png
diff --git a/thumbnail.png b/thumbnail.png
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		This demonstrates [forceLink.iterations](https://github.com/d3/d3-force#link_iterations), which strengthens [d3-force](https://github.com/d3/d3-force)’s link constraint by applying the constraint multiple times per simulation step.
No results found