javascript - 如何连接两个 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
    }
});

标签： javascriptjqueryhtmlcss

Answer 1

您所描述的内容将很难以您的方式使用 html 来完成。如果您想要一条避免其他元素的曲线，您很可能必须使用 SVG 路径和某种寻路算法来计算它应该去哪里。相反，我建议您尝试使用 JavaScript 和 HTML5 Canvas 的解决方案。一个好的起点可能是D3.js中的示例。D3是专为您要创建的图表而设计的。