Search code examples
d3.jsd3-force-directed

Force-directed graph reusability failure?

first of all: d3-version: "version": "3.5.17"

i have two differnet kinds of thematic maps, a proportional symbol map and a pseudo-demers cartogram with symbols (circles, same as in proportional symbol) as close to its origin as possible with collision detection and gravity.

However, i want to animate the circles from the proportional symbol map to the cartogram. In particular, i just want to trigger my force-directed graph for collision detection and gravity; this works fine for the first time. I provide an animation back from a cartogram to a proportional symbol map where each symbol just moves back to its centroid. Now, if i want to go back to the cartogram, the code fails and it says Uncaught TypeError: Cannot read property '1' of undefined, even though i trigger it he same time again as the first time. Is this some kind of bug in reusability of the force? or some kind of error on my side?

The problem can be tested here: https://particles-masterthesis.github.io/aggregation/; on the top left, you can switch between proportional symbol and cartogram.

the appropriate code i am using is the following: case 'psm_cartogram': let psm = this.currentViz; information = { data: psm.nodes, symbols: psm.symbols }; upcomingViz.obj = this.canvas.drawCartogram( null, this.currentViz.constructor.name === "Cartogram", information, () => { this.currentViz.hide(false, true); this.fadeOutParticles(); } ); upcomingViz.type = 'cartogram'; resolve(upcomingViz); break;

The key part is in the information object, where i share the same objects between the cartogram and the proportional symbol map

in the cartogram, i have the following important code:

``` this.force = this.baseMap._d3.layout.force() .charge(0) .gravity(0) .size([this.width - this.symbolPadding, this.height - this.symbolPadding]);

this.nodes = keepInformation.data;
this.node = keepInformation.symbols;

this.force
.nodes(this.nodes)
.on("tick", this.tick.bind(this, 0.0099))
.start();

...

tick(gravity) {
    this.node
    .each(this.gravity(gravity))
    .each(this.collide(0.25))
    .attr("cx", d => { return d.x; })
    .attr("cy", d => { return d.y; });
}

gravity(k) {
    return d => {
        d.x += (d.x0 - d.x) * k;
        d.y += (d.y0 - d.y) * k;
    };
}

//the collide function is not shown as it is a simple quadtree

```

if it helps in any way, the code is also available at https://github.com/particles-masterthesis/aggregation/src/js/visualization/map The main code is the transition-manager and the two types of maps.

i am thankful for any suggestions and support i can get, even if its a simple hint that i could check out.

PS: image image

These are two screenshots; the first one is important for the different logs of cartogram:132 which was a console.log(this.node) in the tick-function before doing any gravity etc. and the second one mentions the error.

for more understanding of the first log: it starts by logging this.node in the tick function; afterwards a visualization change to psm got triggered (cartogram_psm) with a change back to cartogram later on and then the error appeared.

Solution

  • okay so i could figure out my problem:

    transition chaining was incorrect in my way and so, the mysterious attributes on the object appeared;

    rewriting all transitions with this method helped (https://stackoverflow.com/a/17101823/1472902)