diff --git a/README.md b/README.md index debfd7a18d0a307066609cf742f9bfb3ae8b7997..212ec56f4cbe3c9fe46c79ef5352f37b85960373 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 0000000000000000000000000000000000000000..037952ba612049ce9d2678f175c5adefe3c767c7 --- /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 0000000000000000000000000000000000000000..f6685ab56f22061fcde70e0434a75d940fe7b508 --- /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 017af6b0f2db79cd7b10a15debac7c905c0e3929..2994c86609351cbf6689bd00e2550efc7000e9f8 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