Question

有没有办法在d3.js中创建渐变路径，类似于着名的地球风可视化中的风线：

http://earth.nullschool.net/

原则上，似乎我可以创建一个包含很多航点的路径，并将每个末端段转换为透明度，但这看起来很糟糕。有更好的想法吗？

Answer 1

要跟进提供的示例，请在缩小版本上a block。它基于提到的游说。该块说明了我在评论中提到的技术，其中渲染引擎受到激烈挑战，从而免费提供模糊效果。单击 normal 按钮更改为同步重绘，您可以看到模糊效果消失。这是通过以下代码实现的......

            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);
            }
          });

Answer 2

虽然代码是压缩的，但在d3.js中实现了类似的效果。您可能会找到一种方法来对其进行反向工程或查找未压缩的源。

在我看来，每个弧线只有在颜色的情况下被绘制，该渐变应用了随时间变化的渐变，然后被移除。我无法确定所有弧是否共享相同的渐变，只是从不同的地方开始，并在不同的时间出现。这可能是一个很好的捷径。

http://www.nytimes.com/interactive/2012/11/11/sunday-review/counties-moving.html

有一个演示文稿是如何形成的，所以也许他们在别处谈过这个技术？

http://www.slideshare.net/openjournalism/amanda-cox-visualizing-data-at-the-new-york-times

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

d3.js中的衰落路径

2 个答案: