如何連接兩個 HTML 元素避免其他元素

Question

我有這個 HTML/CSS 結構： Codepen

當我選擇它們時，我需要用一條線連接兩個 HTML 元素（點擊第一個元素，然后點擊第二個元素）。

我已經嘗試在它們之間划一條直線並且它成功了。 但問題是，這一行應該避免其他 HTML 元素。

我選擇了兩個這樣的元素：

let selected;
let count = 0;

$('a').on('click', function(){
    selected = $('.selected');
    if (!$(this).hasClass('selected') && count !== 2){
        count++;
        $(this).addClass('selected count' + count);
    } else {
        $(this).removeClass();
        count--;
    }

    if (count === 2) {
        // Here I'll draw line
    }
});

Answer 1

您所描述的內容將很難以您現在的方式使用 html 來完成。 如果你想要一條避免其他元素的曲線，你很可能必須使用 SVG 路徑和某種尋路算法來計算它應該去哪里。 相反，我建議您嘗試使用 JavaScript 和 HTML5 Canvas 的解決方案。 一個好的起點可能是來自 D3.js 的示例。 D3正好適用於您要創建的圖表類型。