强制导向图可重用性失败?
Force-directed graph reusability failure?
首先:
d3 版本:"version": "3.5.17"
我有两种不同类型的专题地图,一种是比例符号地图,另一种是带有符号(圆圈,与比例符号相同)的伪demers 地图,通过碰撞检测和重力尽可能接近其原点。
但是,我想将比例符号地图中的圆圈动画化为制图。特别是,我只想触发用于碰撞检测和重力的力导向图;这是第一次正常工作。我提供了一个从制图返回到比例符号地图的动画,其中每个符号都只是移回其质心。现在,如果我想返回制图,代码会失败并显示 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)
.重力(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 获得。主要代码是转换管理器和两种类型的地图。
我很感谢我能得到的任何建议和支持,即使是一个简单的提示我也可以查看。
PS:
这是两张截图;第一个对于 cartogram:132
的不同日志很重要,它是 tick
函数中的 console.log(this.node)
,然后再进行任何重力等操作,第二个提到错误。
对第一条日志的更多了解:
它首先在 tick 函数中记录 this.node
;之后触发了对 psm 的可视化更改 (cartogram_psm
),稍后又更改回制图,然后出现错误。
好的,这样我就可以解决我的问题了:
我的转换链接不正确,因此出现了对象上的神秘属性;
使用此方法重写所有转换有帮助 ()
首先:
d3 版本:"version": "3.5.17"
我有两种不同类型的专题地图,一种是比例符号地图,另一种是带有符号(圆圈,与比例符号相同)的伪demers 地图,通过碰撞检测和重力尽可能接近其原点。
但是,我想将比例符号地图中的圆圈动画化为制图。特别是,我只想触发用于碰撞检测和重力的力导向图;这是第一次正常工作。我提供了一个从制图返回到比例符号地图的动画,其中每个符号都只是移回其质心。现在,如果我想返回制图,代码会失败并显示 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) .重力(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 获得。主要代码是转换管理器和两种类型的地图。
我很感谢我能得到的任何建议和支持,即使是一个简单的提示我也可以查看。
PS:
这是两张截图;第一个对于 cartogram:132
的不同日志很重要,它是 tick
函数中的 console.log(this.node)
,然后再进行任何重力等操作,第二个提到错误。
对第一条日志的更多了解:
它首先在 tick 函数中记录 this.node
;之后触发了对 psm 的可视化更改 (cartogram_psm
),稍后又更改回制图,然后出现错误。
好的,这样我就可以解决我的问题了:
我的转换链接不正确,因此出现了对象上的神秘属性;
使用此方法重写所有转换有帮助 ()