如何移動多條線路，使它們彼此不重疊

我試圖在地圖上繪製多條線路 - 基本上是走到地鐵站的方向。這些行走方向中的許多行程方向與50％或更多行程相同（如您所期望的，來自相同的起點），所以當我繪製它們時，它們彼此重疊，遮住彼此 - 就像所以：如何移動多條線路，使它們彼此不重疊

Lines drawn on top of each other

在這個例子中，紅線部分是由黃線 - 遮掩我想移動的黃色如以45度角將其平行於紅線。我最初嘗試將X和Y座標偏移幾個像素，但是任何不在90度角的線看起來都是錯誤的。我開始計算一條線正在旅行的程度，說實話，我開始迷失了 - 獲取編程的一面，而不是它的幾何/觸發/數學。

有沒有人有一些關於我應該找什麼關鍵字的建議，或者我應該用什麼方法去解決這個問題？提前致謝。

來源

2013-05-05 Alastair

一個訣竅是當它重疊時錯開線條。這裏有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>

來源

2013-05-05 23:24:09

我會試着將第2行的每個角落移動到東北方几米（嘗試.00001但是實驗），以同時向經度和緯度值移動。放大時，這應該會產生平行線。

您也可以嘗試減少線的不透明度，以便它們混合而不是疊加。

來源

2013-05-05 10:14:32 MymsMan

如何移動多條線路，使它們彼此不重疊

回答

相關問題