Javascript 如何在CSS和HTML中用线绘制连接圆

我想用线作为连接线连接其他圆，每个圆都应该包含超链接文本。从CSS和html开始，我可以向您提出以下概念：

<style>
a {
    border: 1px solid black;
    border-radius: 50%;
    display: block;
    width: 20px;
    height: 20px;
    padding: 5px;
    background: white;
}

#elementG {
    position: absolute;
    left: 150px;
    top: 100px;
}

#elementH {
    position: absolute;
    left: 70px;
    top: 150px;
}

#elementA {
    position: absolute;
    left: 20px;
    top: 80px;
}

b {
    border-bottom: 1px solid black;
    width: 70px;
    display: block;
    position: absolute;
}

#linkGA {
    -moz-transform: rotate(50deg);
    -webkit-transform: rotate(50deg);
    transform: rotate(50deg);
    left: 30px;
    top: 125px
}

#linkAH {
        -moz-transform: rotate(-35deg);
    -webkit-transform: rotate(-35deg);
    transform: rotate(-35deg);
    left: 87px;
    top: 135px
}
</style>

<b id="linkGA"></b>
<b id="linkAH"></b>
<a href="#" id="elementG">G</a>
<a href="#" id="elementA">A</a>
<a href="#" id="elementH">H</a>

a{
边框：1px纯黑；
边界半径：50%；
显示：块；
宽度：20px；
高度：20px；
填充物：5px；
背景：白色；
}
#元素{
位置：绝对位置；
左：150px；
顶部：100px；
}
#元素{
位置：绝对位置；
左：70像素；
顶部：150px；
}
#元素{
位置：绝对位置；
左：20px；
顶部：80px；
}
b{
边框底部：1px纯黑；
宽度：70px；
显示：块；
位置：绝对位置；
}
#林加{
-moz变换：旋转（50度）；
-webkit变换：旋转（50度）；
变换：旋转（50度）；
左：30px；
顶部：125px
}
#林卡{
-moz变换：旋转（-35度）；
-webkit变换：旋转（-35度）；
变换：旋转（-35度）；
左：87px；
顶部：135px
}

sigma.js框架可能比纯css选项更适合

---

到目前为止你有什么？我没有什么新的东西。我想你在尝试之前可能需要摸索一些基础知识。既然你已经有了这幅画，我建议你将这幅画用于背景图像。否则，答案要么是“否”，“svg”，要么因为你的标签上写着Javascript，“canvas”。我认为这很可怕，但当然，在我的评论之后，我不得不投赞成票。这只是“概念证明”，在生产中没有这样疯狂的伎俩。