如何连接两个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正是针对您想要创建的图表类型。