From e356c248496f50e73ad30d25e8ed16984c45fd99 Mon Sep 17 00:00:00 2001
From: Jake <jake.read@cba.mit.edu>
Date: Mon, 10 Jun 2019 14:13:28 -0400
Subject: [PATCH] do example custom force

---
 README.md         |  6 +++++
 view/fconstant.js |  8 +++++++
 view/frect.js     | 58 +++++++++++++++++++++++++++++++++++++++++++++++
 view/vfloop.js    | 19 +++++++++-------
 4 files changed, 83 insertions(+), 8 deletions(-)
 create mode 100644 view/fconstant.js
 create mode 100644 view/frect.js

diff --git a/README.md b/README.md
index debfd7a..212ec56 100644
--- a/README.md
+++ b/README.md
@@ -117,6 +117,12 @@ This is (maybe) worth documenting. A meta-note is that, doing this again, I woul
 [rectangular collision](http://bl.ocks.org/natebates/273b99ddf86e2e2e58ff)
 [more rectangles](http://bl.ocks.org/ilyabo/2585241)
 
+A few of these examples are from D3 v3, while the newest version is D3 v4 - particularely, this update changed how force layout works. So.
+
+[some more help](https://hi.stamen.com/forcing-functions-inside-d3-v4-forces-and-layout-transitions-f3e89ee02d120)
+
+
+
 ## Boundary Conditions
 
 The top-level space doesn't exactly have anything to prevent floaters. It would be great to do some graph organization routines that 'pin' parts of these things down.
diff --git a/view/fconstant.js b/view/fconstant.js
new file mode 100644
index 0000000..037952b
--- /dev/null
+++ b/view/fconstant.js
@@ -0,0 +1,8 @@
+// constant: a fn' wrpper for a value,
+// because chained accessors ... 
+
+export default function(x) {
+  return function() {
+    return x;
+  };
+}
diff --git a/view/frect.js b/view/frect.js
new file mode 100644
index 0000000..f6685ab
--- /dev/null
+++ b/view/frect.js
@@ -0,0 +1,58 @@
+// this is a custom d3 force, written as an es6 module like the lord intended
+// an experiment,
+// also: jake learns how the pros write js (?)
+
+import constant from './fconstant.js'
+
+// to start, I'm going to .vx things with some right bias, just to
+// test
+export default function(x){
+  var strength = constant(0.1),
+      nodes,
+      strengths,
+      xz
+
+  // starting off strong w/ this mystery,
+  if(typeof x !== 'function') x = constant(x == null ? 0 : +x)
+
+  // alpha is the energy in the simulation,
+  // that is slowly 'annealed' out
+  function force(alpha) {
+    for(var i = 0, n = nodes.length, node; i < n; ++i){
+      node = nodes[i]
+      let vxa = (xz[i] - node.x) * strengths[i] * alpha
+      console.log('did', vxa)
+      node.vx += vxa
+    }
+  }
+
+  function initialize() {
+    if(!nodes) return;
+    var i, n = nodes.length
+    strengths = new Array(n)
+    xz = new Array(n)
+    for(i = 0; i < n; ++i){
+      // recall, x is a fn we can pass into this constructor
+      // to define how we set strength,
+      strengths[i] = isNaN(xz[i] = +x(nodes[i], i, nodes)) ? 0 : +strength(nodes[i], i, nodes)
+      // that '+strengths()' "coerces" whatever strength returns into a number,
+    }
+  }
+
+  // public handles?
+  force.initialize = function(_){
+    nodes = _;
+    initialize()
+  }
+
+  force.strength = function(_){
+    // bonkers
+    return arguments.length ? (strength = typeof _ === 'function' ? _ : constant(+_), initialize(), force) : strength;
+  }
+
+  force.x = function(_){
+    return arguments.length ? (x = typeof _ === 'function' ? _ : constant(+_), initialize(), force) : x;
+  }
+
+  return force 
+}
diff --git a/view/vfloop.js b/view/vfloop.js
index 017af6b..2994c86 100644
--- a/view/vfloop.js
+++ b/view/vfloop.js
@@ -1,5 +1,7 @@
 // force loop for the dom div document world
 
+import frect from './frect.js'
+
 function Floop(View) {
   // it's not always the top level,
   let view = View
@@ -33,13 +35,13 @@ function Floop(View) {
   }
 
   let onEnd = () => {
-    console.log('FINSIM')
+    console.log(`${view.name} FLOOP COMPLETE`)
   }
 
   // try this 1st with one-type of def / deg, then rewrite deg structure
   // a bit confusion, floop.reset !== floop.sim.restart()
   this.reset = () => {
-    console.log('FLOOP RESET')
+    console.log(`${view.name} FLOOP RESET`)
     // if we don't stop it before we write new stuff, lots of NaNs appear
     if (this.sim) this.sim.stop()
     // a new sim,
@@ -103,21 +105,22 @@ function Floop(View) {
       }
     } // end node-in-node search for links
 
-    // console.log('links', links)
-
+    // we restart the simulation by writing over it w/ a new one
     this.sim = d3.forceSimulation(nodes)
-      .force('collide', d3.forceCollide((node, i, nodes) => {
-        return node.r
-      }))
       .force('link', d3.forceLink(links).distance((link) => {
         // nodes are floaters, links have indice, could do like
         return Math.max(link.source.w, link.source.w)
       }))
+      .force('rectcollide', frect(100))
       .on('tick', onTick)
       .on('end', onEnd)
+      .force('collide', d3.forceCollide((node, i, nodes) => {
+        return node.r
+      })) // hmmm
     // to go manuel, call sim.stop()
     // then we can call sim.tick() as we wish,
-  }
+  } // end this.reset()
+
 }
 
 export default Floop
-- 
GitLab