如何移动多条线以使它们不会相互叠加

Question

我试图在地图上绘制一些线条 - 基本上是到地铁站的步行路线。这些行走方向中的许多都是相同的50％或更多的旅程（正如你所期望的那样，来自同一个起点），所以当我绘制它们时，它们相互叠加，互相遮挡 - 像这样：

在这个例子中，红线部分被黄线遮挡 - 我想移动黄色，例如以45度角放置，使其平行于红线。我最初尝试将X和Y坐标偏移几个像素，但是任何不是90度角的线看起来都是错误的。我开始玩计算线路正在行进的度数，说实话我开始迷路了 - 得到它的编程方面，而不是它的几何/ trig /数学。

有没有人对我应该寻找的关键词有什么建议，或者我应该采用哪种方式？提前谢谢。

Answer 1

一个技巧是在重叠时错开线条。这里有4条重叠和交错的线条，因此所有线条都是可见的。人眼训练有素，可以追随一种颜色。

示例：http://jsbin.com/ovacar/1/edit

<svg>
  <path stroke="skyblue" stroke-width="4" stroke-dasharray="5,15" d="M0 20 l215 0" /> 
  <path stroke="cyan" stroke-width="4" stroke-dasharray="0,0,5,15" d="M5 20 l215 0" />
  <path stroke="pink" stroke-width="4" stroke-dasharray="0,5,5,10" d="M5 20 l215 0" />
  <path stroke="green" stroke-width="4" stroke-dasharray="0,10,5,5" d="M5 20 l215 0" />
</svg>

Answer 2

我会尝试通过向纬度和长值添加一小部分（尝试.00001但是实验）将第2行的每个角移动到东北几米处。这应该在放大时给出平行线。

您还可以尝试降低线条的不透明度，使它们混合而不是叠加。