绘制曲线以连接网页上的元素

Question

我的任务是将这个粗略的想法变成一个实况页面

虽然我已经建立了基本结构，但我想知道创建连接数月的曲线的最佳方法。

我应该创建图像还是叠加它们？ 有没有办法用某种脚本/编码绘制它们？ 帆布？

我不知道最好的方法。

Answer 1

我只是把它放在一起向你展示它很有可能并且可能有其他方法可以做到。

#upper-line {
    border: solid 1px #000;
    width:80%;
    height: 250px;
    border-radius: 50%;
   left:55px;
    border-right: none;
    border-top: none;
    border-bottom: none;
    position: absolute;
    top: 100px;
}

#lower-line {
    border: solid 1px #000;
    width: 80%;
    height: 250px;
    border-radius: 50%;
    top: 340px;
    left: -60px;
    border-left: none;
    border-top: none;
    border-bottom: none;
    position: absolute
}

#content-1 {
    position: absolute;
   left: 180px;
    top: 75px;
    width: 100px;
    height: 100px;
    line-height: 100px;
    border-radius: 50%;
    text-align: center;
    background-color: orange;
}

#content-2 {
    position: absolute;
   left: 40px;
    top: 200px;
    width: 100px;
    height: 100px;
    line-height: 100px;
    border-radius: 50%;
    text-align: center;
    background-color: #98879A;
}

#content-3 {
    position: absolute;
   left: 400px;
    top: 400px;
    width: 100px;
    height: 100px;
    line-height: 100px;
    border-radius: 50%;
    text-align: center;
    background-color: #637DBA;
}

<div id="upper-line"></div>

<div id="lower-line"></div>

<div id="content-1">content 1</div>

<div id="content-2">content 2</div>

<div id="content-3">content 3</div>

注意：这只是一个例子，你必须做一些工作才能让它适合你。代码可能更清晰。

See how it works on fiddle

Answer 2

你应该试试SVG。

JsPlumb是一个很棒的库，可以在元素之间建立联系。

http://jsplumb.org