zunächst: d3-Version: "version": "3.5.17"Force-directed graph reusability failure?
i habe zwei differnet Arten von thematischen Karten, ein proportionalen Symbolkarte und ein pseudo-Demers Kartogramm mit Symbolen (Kreisen, gleiche wie in proportional Symbol) so nahe an seinen Ursprung möglichst mit Kollisionserkennung und Schwerkraft.
Allerdings möchte ich die Kreise von der proportionalen Symbolkarte zum Kartogramm animieren. Insbesondere möchte ich nur meinen kraftgerichteten Graphen zur Kollisionserkennung und Gravitation auslösen; Das funktioniert zum ersten Mal gut. Ich stelle eine Animation von einem Kartogramm zu einer proportionalen Symbolkarte bereit, wobei jedes Symbol einfach zu seinem Schwerpunkt zurückbewegt wird. Nun, wenn ich zurück zum Kartogramm gehen möchte, schlägt der Code fehl und es heißt Uncaught TypeError: Cannot read property '1' of undefined, obwohl ich ihn gleich wieder zum ersten Mal trigge. Ist das eine Art Bug in der Wiederverwendbarkeit der Kraft? oder irgendeine Art von Fehler auf meiner Seite?
Das Problem kann hier getestet werden: https://particles-masterthesis.github.io/aggregation/; oben links können Sie zwischen Proportional-Symbol und Kartogramm wechseln.
der entsprechende Code ich verwende ist die folgende: 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;
Der Schlüsselteil im information Objekt ist, wobei i die gleichen Objekte zwischen dem Kartogramm teilen und die proportional Symbolkarte
im Kartogramm , ich habe folgenden wichtigen 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
`` `
, wenn es in irgendeiner Weise hilft, den Code auch bei https://github.com/particles-masterthesis/aggregation/src/js/visualization/map Der Hauptcode verfügbar ist, ist der Übergang-Manager und die beiden Typen von Karten.
ich bin dankbar für alle Vorschläge und Unterstützung, die ich bekommen kann, auch wenn es ein einfacher Hinweis, dass ich auschecken könnte.
PS: 
Dies sind zwei Screenshots; die erste ist wichtig für die verschiedenen Logs von cartogram:132, die eine console.log(this.node)-Funktion war, bevor irgendeine Gravitation usw. durchgeführt wurde, und die zweite erwähnt den Fehler.
für mehr Verständnis des ersten Protokolls: es beginnt durch Protokollierung this.node in der Tick-Funktion; danach wurde eine Visualisierungsänderung zu psm ausgelöst (cartogram_psm) mit einem Wechsel zurück zum Kartogramm später und dann erschien der Fehler.