d3.js中的衰落路径

在d3.js中是否有一种方法可以创建衰减路径，类似于著名的地球风可视化中的风线：

---

原则上，我似乎可以创建一条包含许多航路点的路径，并将每个终点段转换为透明段，但这似乎有点粗糙。有更好的想法吗？

这里是d3.js中实现的类似效果，尽管代码是压缩的。您可能会找到一种方法对其进行反向工程或找到未压缩的源代码

在我看来，每一个弧只有在它的颜色有一个渐变，随着时间的推移而变化，然后被删除的时候才会被绘制。我不太清楚是否所有的弧都有相同的梯度，只是从不同的地方开始，在不同的时间出现。这可能是一条很好的捷径

有一个关于这是怎么回事的演示，所以他们可能在别处谈论过这项技术

---

请注意，我意识到这实际上并不是一个答案，只是需要比评论部分允许的更多的空间

这里有一个在d3.js中实现的类似效果，尽管代码是压缩的。您可能会找到一种方法对其进行反向工程或找到未压缩的源代码

在我看来，每一个弧只有在它的颜色有一个渐变，随着时间的推移而变化，然后被删除的时候才会被绘制。我不太清楚是否所有的弧都有相同的梯度，只是从不同的地方开始，在不同的时间出现。这可能是一条很好的捷径

有一个关于这是怎么回事的演示，所以他们可能在别处谈论过这项技术

---

请注意，我意识到这实际上不是一个答案，只是需要比评论部分更多的空间来跟进提供的示例，这里是一个简化版本。它是根据前面提到的画布制作的。该块演示了我在评论中提到的技术，其中渲染引擎受到了激烈的挑战，从而免费提供了模糊效果。单击“法线”按钮更改为同步重画，可以看到模糊效果消失。这是通过以下代码实现的

            function run() {
              paused = false;
              then = Date.now();
              now = then;

              particles.forEach(function(p) {
                p.t = now + (Math.random() - 1) * duration;
              });

              d3.timer(function(elapsed) {
                var i = -1, n = particles.length;
                var f = format(" >8.1f"), f3 = format(" >8.4f");
                var normal = modeButton.text() == "normal", t;

                if(normal) {
                  // clear the shadow context and copy the current context to it
                  offscreenContext.clearRect(0, 0, width, height);
                  offscreenContext.drawImage(canvas, 0, 0, width, height)
                  //clear the current context and try to jam the previous version
                  //back on top of the drawing activities
                  //lovely chaos ensues
                  context.clearRect(0, 0, width, height);
                  context.drawImage(offscreenCanvas, 0, 0, width, height);
                }
                else {
                  //allow the
                    context.clearRect(0, 0, width, height);
                    context.drawImage(offscreenCanvas, 0, 0, width, height);
                    offscreenContext.clearRect(0, 0, width, height);
                }

                now = elapsed + then;
                //iterate the transition for each county
                while(++i < n) {
                  var p = particles[i], t = (now - p.t) / duration;
                  if(t > 1) {
                    p.t += duration * Math.floor(t);
                    p.y = p.d.centroid[1] + (true ? (Math.random() - .5) * 2 : 0);
                  }
                  else if(t > 0) {
                    if(!normal){
                      offscreenContext.fillStyle = "rgba(" + p.r + "," + p.g + "," + p.b + "," + mirror(1 - t) + ")";
                      offscreenContext.fillRect(p.x + (t - .5) * p.v * 2 - .75, p.y - .75, 2.5, 2.5);
                    } else {
                      context.fillStyle = "rgba(" + p.r + "," + p.g + "," + p.b + "," + mirror(1 - t) + ")";
                      context.fillRect(p.x + (t - .5) * p.v * 2 - .75, p.y - .75, 1.5, 1.5);
                    }
                  }
                }

                return paused;
              }, 0, now);
            }
          });

---

为了跟进提供的示例，下面是一个简化版本。它是根据前面提到的画布制作的。该块演示了我在评论中提到的技术，其中渲染引擎受到了激烈的挑战，从而免费提供了模糊效果。单击“法线”按钮更改为同步重画，可以看到模糊效果消失。这是通过以下代码实现的

            function run() {
              paused = false;
              then = Date.now();
              now = then;

              particles.forEach(function(p) {
                p.t = now + (Math.random() - 1) * duration;
              });

              d3.timer(function(elapsed) {
                var i = -1, n = particles.length;
                var f = format(" >8.1f"), f3 = format(" >8.4f");
                var normal = modeButton.text() == "normal", t;

                if(normal) {
                  // clear the shadow context and copy the current context to it
                  offscreenContext.clearRect(0, 0, width, height);
                  offscreenContext.drawImage(canvas, 0, 0, width, height)
                  //clear the current context and try to jam the previous version
                  //back on top of the drawing activities
                  //lovely chaos ensues
                  context.clearRect(0, 0, width, height);
                  context.drawImage(offscreenCanvas, 0, 0, width, height);
                }
                else {
                  //allow the
                    context.clearRect(0, 0, width, height);
                    context.drawImage(offscreenCanvas, 0, 0, width, height);
                    offscreenContext.clearRect(0, 0, width, height);
                }

                now = elapsed + then;
                //iterate the transition for each county
                while(++i < n) {
                  var p = particles[i], t = (now - p.t) / duration;
                  if(t > 1) {
                    p.t += duration * Math.floor(t);
                    p.y = p.d.centroid[1] + (true ? (Math.random() - .5) * 2 : 0);
                  }
                  else if(t > 0) {
                    if(!normal){
                      offscreenContext.fillStyle = "rgba(" + p.r + "," + p.g + "," + p.b + "," + mirror(1 - t) + ")";
                      offscreenContext.fillRect(p.x + (t - .5) * p.v * 2 - .75, p.y - .75, 2.5, 2.5);
                    } else {
                      context.fillStyle = "rgba(" + p.r + "," + p.g + "," + p.b + "," + mirror(1 - t) + ")";
                      context.fillRect(p.x + (t - .5) * p.v * 2 - .75, p.y - .75, 1.5, 1.5);
                    }
                  }
                }

                return paused;
              }, 0, now);
            }
          });

---

对我来说，这听起来是一个合理的解决方案。如果你使用小的填充圆，你可以从中构建一些东西。对我来说，这听起来是一个合理的解决方案。如果你使用小的填充圆，你可以从中构建一些东西。第一个示例正是我要寻找的，但我在DOM中的任何地方都找不到路径。可能是它们直接绘制在画布上，而不是SVG元素上吗？@juniper-你是对的：第一个示例使用的是画布，而不是SVG。它只是在画布上填充小矩形，并手动执行不透明度和位置转换。是的，在这里可以找到一个更清晰的实现。我想知道如果它必须更新DOM而不是直接绘制到画布上，速度会慢多少。我想我会发现：我怀疑如果使用DOM元素，它会更重。选举地图使用了一种廉价但超级有效的技巧来实现模糊FOC：通过压倒渲染引擎。如果使用svg，则需要在粒子上运行转换来完成此操作，这将是ex$pen$ive。第一个示例正是我要查找的，但我在DOM中的任何位置都找不到路径。可能是它们直接绘制在画布上，而不是SVG元素上吗？@juniper-你是对的：第一个示例使用的是画布，而不是SVG。它只是在画布上填充小矩形，并手动执行不透明度和位置转换。是的，在这里可以找到一个更清晰的实现。我想知道如果它必须更新DOM而不是直接绘制到画布上，速度会慢多少。我想我会发现：我怀疑如果使用DOM元素，它会更重。选举地图使用了一种廉价但超级有效的技巧来实现模糊FOC：通过压倒渲染引擎。如果你使用svg，你需要在粒子上运行转换才能做到这一点，那将是ex$pen$ive.Holy垃圾！这很好，但我还是有点不知道到底发生了什么。看起来您在正常模式下绘制上下文，在同步模式下绘制offscreenContext。然后，您只需将当前图像复制到offscreenContext并从中绘制。发动机在哪里受到挑战？另外，当您无法访问DOM时，如何调试控制台上的绘图？是的，他们使用两个上下文进行调试，这样可以避免在扫描节点时进行渐进更新；

---

所以他们会更新屏幕外的文本，然后将其闪现出来，或者至少你会认为这是个好主意，但在这一过程中，他们发现，如果你试图在渲染引擎的喉部塞住离屏文本，同时在可视上下文上进行实时重画，那么你会得到一个很好的混乱插值，从而产生模糊效果。免费！如果在Chrome开发工具中运行配置文件并查看flame图，则可以看到drawImage和fillRectangle调用的碎片，以及这两种模式之间的差异。但大部分时间我只是在猜测发生了什么。我对它的其他观点很感兴趣……是的，我刚刚看到这个：，它做了类似的事情。我会看看是否用D3做不到，然后试一下画布版本。@CoolBlue谢谢你分享这个伟大的答案，我用它来引导我开始想象巴士运动的路径，就像这个链接中的神圣垃圾！这很好，但我还是有点不知道到底发生了什么。看起来您在正常模式下绘制上下文，在同步模式下绘制offscreenContext。然后，您只需将当前图像复制到offscreenContext并从中绘制。发动机在哪里受到挑战？另外，当您无法访问DOM时，如何调试控制台上的绘图？是的，他们使用两个上下文进行调试，这样可以避免在扫描节点时进行渐进更新；所以他们会更新屏幕外的文本，然后将其闪现出来，或者至少你会认为这是个好主意，但在这一过程中，他们发现，如果你试图在渲染引擎的喉部塞住离屏文本，同时在可视上下文上进行实时重画，那么你会得到一个很好的混乱插值，从而产生模糊效果。免费！如果在Chrome开发工具中运行配置文件并查看flame图，则可以看到drawImage和fillRectangle调用的碎片，以及这两种模式之间的差异。但大部分时间我只是在猜测发生了什么。我对它的其他观点很感兴趣……是的，我刚刚看到这个：，它做了类似的事情。我会看看是否用D3做不到，然后试用画布版本。@CoolBlue谢谢你分享这个伟大的答案，我用它来引导我开始想象巴士运动的路径，就像在这个链接中一样