链接转换不会逐步触发

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选择上创建转换会取消可能已创建的任何其他转换。也就是说，只有您对using System; using System.Collections.Generic; using System.Linq; using System.Net; using System.Windows; using System.Windows.Controls; using System.Windows.Navigation; using Microsoft.Phone.Controls; using Microsoft.Phone.Shell; using picture.Resources; using System.Windows.Media.Imaging; using System.Windows.Media; using Microsoft.Expression.Drawing; namespace picture { public partial class MainPage: PhoneApplicationPage { // Constructor public MainPage() { InitializeComponent(); BitmapImage image1 = new BitmapImage(); image1.SetSource(Application.GetResourceStream(new Uri(@ "Assets/WP_20150925_09_20_03_Pro (2).jpg", UriKind.Relative)).Stream); BitmapImage image2 = new BitmapImage(); image2.SetSource(Application.GetResourceStream(new Uri(@ "Assets/WP_20150925_09_20_03_Pro.jpg", UriKind.Relative)).Stream); // Sample code to localize the ApplicationBar //BuildLocalizedApplicationBar(); } private double get_Percentage_Method(WriteableBitmap wb1, WriteableBitmap wb2) { var img1 = wb1; var img2 = wb2; // Validation of image size code int width1 = img1.PixelWidth; int width2 = img2.PixelWidth; int height1 = img1.PixelHeight; int height2 = img2.PixelHeight; if ((width1 != width2) || (height1 != height2)) { MessageBox.Show("Error: Images dimensions mismatch"); } long diff = 0; for (int i = 0; i < width1; i++) { for (int j = 0; j < height1; j++) { // get same position pixel of both WirtableBitmap Image object Color color1 = wb1.GetPixel(i, j); Color color2 = wb2.GetPixel(i, j); // converting each value iGetPixelnto Integer int r1 = (int) color1.R; int g1 = (int) color1.G; int b1 = (int) color1.B; int r2 = (int) color2.R; int g2 = (int) color1.G; int b2 = (int) color1.B; // calculating difference between RGB color value and adding it in Diff variable. diff += Math.Abs(r1 - r2); diff += Math.Abs(g1 - g2); diff += Math.Abs(b1 - b2); } } // Converting difference into percentage and then retun it. double n = width1 * height1; //* 3; double p = diff / n / 255.0; MessageBox.Show("diff percent: " + (p * 100.0)); return (p * 100.0); } } } 的最后一次调用才会生效，因为之前的所有转换都会被取消。

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

.transition()

这将在每次调用时使用新转换覆盖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); } ，从而确保您不会丢失任何转换。

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