如何连接两个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的examples。 D3完全适合您要创建的图表。