まず第一に: d3-バージョン:"version": "3.5.17"
2 つの異なる種類のテーマ マップ、比例シンボル マップ、およびシンボル (円、比例シンボルと同じ) を含む疑似デマーズ カートグラムがあり、衝突検出と重力を使用して、可能な限り原点に近づけます。
ただし、比例シンボル マップからカートグラムへの円をアニメーション化したいと考えています。特に、衝突検出と重力のために力指向グラフをトリガーしたいだけです。これは初めてうまくいきます。カートグラムからプロポーショナル シンボル マップに戻るアニメーションを提供します。各シンボルはその重心に戻るだけです。ここで、カートグラムに戻りたい場合、コードは失敗しUncaught TypeError: Cannot read property '1' of undefined、最初と同じ時間にもう一度トリガーしても、と表示されます。これは、フォースの再利用性におけるある種のバグですか? または私の側の何らかのエラーですか？
問題はここでテストできます: https://particles-masterthesis.github.io/aggregation/ ; 左上で、比例記号とカートグラムを切り替えることができます。
私が使用している適切なコードは次のとおりです。
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;
重要な部分はinformationオブジェクトにあります。ここでは、カートグラムと比例シンボル マップの間で同じオブジェクトを共有しています。
カートグラムには、次の重要なコードがあります。
``` 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
```
なんらかの形で役立つ場合は、コードもhttps://github.com/particles-masterthesis/aggregation/src/js/visualization/mapで入手できます。メイン コードは、トランジション マネージャーと 2 種類のマップです。
私がチェックアウトできる簡単なヒントであっても、私が得ることができる提案とサポートに感謝します.
PS:
これらは 2 つのスクリーンショットです。最初のものは、重力などを行う前に-関数にあったさまざまなログにとって重要であり、2番目のものはエラーについて言及していcartogram:132ます。console.log(this.node)tick
this.node最初のログの理解を深めるために: tick 関数でログを記録することから始めます。その後、psm へのビジュアライゼーションの変更がトリガーされ ( cartogram_psm)、後でカートグラムに戻ると、エラーが表示されました。