强制导向的图形可重用性失败?

时间:2016-07-27 21:53:54

标签: d3.js d3-force-directed

首先: d3-version:"version": "3.5.17"

我有两种不同类型的专题地图,一个比例符号地图和一个带有符号(圆形,与比例符号相同)的伪模式,与碰撞检测和重力尽可能接近其原点。

但是,我想要将比例符号图中的圆圈设置为制图。特别是,我只想触发用于碰撞检测和重力的力导向图;这是第一次正常工作。我提供了一个从制图到比例符号图的动画,其中每个符号都会移回到其质心。现在,如果我想回到制图,代码会失败并显示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获得。主要代码是转换管理器和两种类型的地图。

我感谢任何可以获得的建议和支持,即使它只是一个简单的提示我可以查看。

PS: image image

这是两个截图;第一个对于cartogram:132的不同日志非常重要,console.log(this.node) tickthis.node - 函数中执行任何重力等等,而第二个日志提到错误。

了解第一个日志: 它首先在tick函数中记录cartogram_psm;之后,可视化更改为psm被触发(ConvertTo-Html),稍后更改回制图,然后出现错误。

1 个答案:

答案 0 :(得分:0)

好的,所以我可以弄明白我的问题:

过渡链在我的方式是不正确的,所以,对象的神秘属性出现了;

使用此方法重写所有过渡有助于(https://stackoverflow.com/a/17101823/1472902