沿着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属性{ {1}}元素。希望你能对此有所了解！

编辑：我添加an example image以进一步表达我的意思是“沿路径绘制变量”。请注意，该路径用于设置x轴的形状。

Answer 1

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

我遵循的方法是：

1. 找到@给定距离的路径中的点。
2. 找到垂直单位向量@ that point。
3. 使用点的坐标和垂直向量来查找我想要绘制的点的坐标。

这里的Codepen example显示了我是如何让它发挥作用的。

这是沿曲线绘制时的阶梯图：LINK

（尚未允许发布图片） ...