沿着 d3.js 中的路径绘图

Question

在 D3.js 中，要画一条线，我会定义线函数，它看起来像这样：

var line = d3.svg.line()
           .x(function(d) { return x(d.distance); })
           .y(function(d) { return y(d.speed); });

例如，我会调用此函数来渲染自行车旅行中记录的速度。 distance 轴是水平的。

但是，实际上，自行车道不是水平的，我在数据对象中提供了 elevation 变量。我如何使用它来绘制沿实际自行车道的速度，显示起伏以及速度的相对增加和减少？

根据您的经验，沿路径绘制变量的最佳方法是什么？ x轴应与定义的路径重合，y轴始终与其垂直。

我正在考虑使用 "Point-Along-Path interpolation"，结合某种导数计算来了解垂直方向...然后找到给定点的 x,y 坐标。

但也许我没有像 "Curved textPath"（Mike bostock 的区块 #2565344）中使用的那样使用一些非常简单的解决方案，它只使用 hlink 属性 text 元素。希望您能对此有所启发！

编辑： 我添加了 an example image 以进一步表达 "plotting a variable along a path" 的意思。注意路径是用来设置x轴的形状的。

Answer 1

答案涉及使用路径的 getPointAtLength 和 getTotalLength 属性。

我采用的方法是：

这里是 Codepen example 展示了我是如何让它工作的。

这是沿着曲线绘制的阶梯图的样子：LINK

（还不允许 post 图片）...

Plotting along a path in d3.js