链式转换不会逐步触发答案

【问题标题】：Chained transitions don't trigger step-by-step链式转换不会逐步触发
【发布时间】：2015-10-20 09:13:23
【问题描述】：

首先，我研究过、尝试过的一些相关项目，但效果不佳。

接下来，我的代码的相关部分：

function moveMarker(i) {

    var curr_i = parseInt(d3.select("#nomad").attr("nomad-index"));
    var target_i = parseInt(i);

    switch (curr_i) {
        case 0:
            switch (target_i) {
                case 0:
                    break;
                case 1:
                    moveToMark(1);
                    break;
                case 2:
                    moveToMark(1);
                    moveToMark(2);
                    break;
                case 3:
                    moveToMark(1);
                    moveToMark(2);
                    moveToMark(3);
                    break;
                case 4:
                    moveToMark(1);
                    moveToMark(2);
                    moveToMark(3);
                    moveToMark(4);
                    break;
            }
        case 1:
            switch (target_i) {
                case 0:
                    moveToMark(0);
                    break;
                case 1:
                    break;
                case 2:
                    moveToMark(2);
                    break;
                case 3:
                    moveToMark(2);
                    moveToMark(3);
                    break;
                case 4:
                    moveToMark(2);
                    moveToMark(3);
                    moveToMark(4);
                    break;
            }
        case 2:
            switch (target_i) {
                case 0:
                    moveToMark(1);
                    moveToMark(0);
                    break;
                case 1:
                    moveToMark(1);
                    break;
                case 2:
                    break;
                case 3:
                    moveToMark(3);
                    break;
                case 4:
                    moveToMark(3);
                    moveToMark(4);
                    break;
            }
        case 3:
            switch (target_i) {
                case 0:
                    moveToMark(2);
                    moveToMark(1);
                    moveToMark(0);
                    break;
                case 1:
                    moveToMark(2);
                    moveToMark(1);
                    break;
                case 2:
                    moveToMark(2);
                    break;
                case 3:
                    break;
                case 4:
                    moveToMark(4);
                    break;
            }
        case 4:
            switch (target_i) {
                case 0:
                    moveToMark(3);
                    moveToMark(2);
                    moveToMark(1);
                    moveToMark(0);
                    break;
                case 1:
                    moveToMark(3);
                    moveToMark(2);
                    moveToMark(1);
                    break;
                case 2:
                    moveToMark(3);
                    moveToMark(2);
                    break;
                case 3:
                    moveToMark(3);
                    break;
                case 4:
                    break;
            }
    }
}

function moveToMark(i) {

    var x = spot[i][7]; // Latitude
    var y = spot[i][8]; // Longitude

    d3.select("#nomad")
        .attr("nomad-index", i)
        .transition()
        .delay(3000)
        .duration(1000)
        .attr("cx", x)
        .attr("cy", y);
}

我正在尝试做的事情的要点：

我有一个事件表。单击表中的任何事件时，我有一个圆圈 (nomad) 移动到该事件的相应位置，如 spot 数据集中确定的那样。直接点对点移动是没有问题的。但是，我有一个特殊的限制：我必须根据事件的时间线移动。

说，我点击事件 #3。我的圈子必须首先移动到事件#1 和#2，之后他们将留在事件#3。如果圆在任何事件中，点击任何其他事件，无论是较低的还是较高的索引，它都需要遍历其当前位置和目标之间的事件。

我相信我的嵌套开关案例可以进一步解释这一点。我相信我正在尝试的事情并不像我想象的那么复杂。但是，我遇到了一个重大问题：我的nomad 圈子没有逐步完成事件，而是在延迟后立即跳转到最后一个事件。

我在上面的链接中读到，转换存在关于链接的问题，或者我必须使用 end(...) 来完成这项工作。

问题/s：

是否可以将这种尝试减少为递归函数？如果是这样，怎么做？如果没有，我怎样才能让每个moveToMark 连续触发？

【问题讨论】：

标签： javascript d3.js

【解决方案1】：

问题是在 D3 选择上创建过渡会取消可能已创建的任何其他过渡。也就是说，只有您最后一次调用 .transition() 才会生效，因为之前的所有转换都已取消。

解决方案是在 transition 而不是选择上创建另一个转换（请参阅the documentation）。如下所示：

var cur_trans;

function moveMarker(i) {
  cur_trans = d3.select("#nomad");
  // more code
}

function moveToMark(i) {
  var x = spot[i][7]; // Latitude
  var y = spot[i][8]; // Longitude

  d3.select("#nomad")
    .attr("nomad-index", i);

  cur_trans = cur_trans
    .transition()
    .delay(3000)
    .duration(1000)
    .attr("cx", x)
    .attr("cy", y);
}

这将在每次调用时用新的转换覆盖cur_trans，从而确保您不会丢失任何转换。

请注意，根据您的代码的其余部分及其调用结构，您可能需要防范竞争条件等。

【讨论】：

似乎这是要走的路。谢谢！