javascript - 链式转换不会逐步触发

Question

首先，我研究过、尝试过一些相关的项目，但没有取得好的结果。

• https://stackoverflow.com/questions/28612706/step-by-step-transitions-using-d3-js
• Queue of transitions in d3.js; one by one
• D3.js chain transitions for compound animations for different shapes

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

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(...) 才能完成这项工作。

问题:

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

Answer 1

问题在于，在 D3 选择上创建过渡会取消可能已创建的任何其他过渡。也就是说，只有最后一次调用 .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，从而确保您不会丢失任何转换。

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