在两个div之间连接一条线

Question

我试图用divs和每两个divs之间的连接线做一个类似网络的设计，但是当我使用svg和line标签与下面的JS函数时，控制台显示一个错误，说

position不是函数

我的代码有什么问题?我如何修复它，或者有其他的方法来绘制线之间的两个divs?**问题解决了，但现在我尝试使用循环和数组，因为如果我手动连接所有div，它将永远。所以我写了下面的代码，但知道它再次显示相同的错误。我试图把数组的每个元素在一个变量，但它也没有工作。* *

代码如下:

```
$(function() {
var orgs = document.getElementsByClassName('org'),
lines = document.getElementsByClassName('con-line'),
org1,
org2,
line,
pos1,
pos2,
count = 0;
for (let i = 0; i < orgs.length; i++) {

org1 = orgs[i];
for (let j = 0; j < orgs.length; j++) {
org2 = orgs[j];
line = lines[count];

if (j != i)
{
pos1 = org1.position();
pos2 = org2.position();
line
.attr('x1', pos1.left)
.attr('y1', pos1.top)
.attr('x2', pos2.left)
.attr('y2', pos2.top)
.attr('stroke', 'red')
.attr('stroke-width', 2);
count++;
}
}
}    
});
```

Answer 1

jQuery

1. 试着把你的代码包装成"document ready"建设。这将确保代码在jQuery加载后执行。

2. 定义stroke和stroke-width属性，使行可见。

$(function() {
var line1= $('#line1');
var div1 = $('#org1');
var div2 = $('#org2');
var l1pos1 = div1.position();
var l1pos2 = div2.position();
line1
.attr('x1', l1pos1.left)
.attr('y1', l1pos1.top)
.attr('x2', l1pos2.left)
.attr('y2', l1pos2.top)
.attr('stroke', 'red')
.attr('stroke-width', 10);
});

.con{
margin-top: 50px;
}
.con-title{
width: 100%;
text-align: center;
color: #4E4E50;
font-size: 40px;
font-weight: bold;
}
.org-map{
position: relative;
width: 300px;
height: 300px;
margin: 40px auto 0 auto;
}
.org{
position: absolute;
}
.org .org-box{
position: relative;
bottom: 0px;
width: 15px;
height: 15px;
border-radius: 20px;
background: #4E4E50;
transition: 0.6s;
}
#org1{
transform: translate(-50%, 0%);
bottom: 80%;
left: 50%;
}
#org2{
transform: translate(-50%, 0%);
bottom: 65%;
left: 20%;
}
#org3{
transform: translate(-50%, 0%);
bottom: 35%;
left: 20%;
}
#org4{
transform: translate(-50%, 0%);
bottom: 50%;
left: 50%;
}
#org5{
transform: translate(-50%, 0%);
bottom: 65%;
left: 80%;
}
#org6{
transform: translate(-50%, 0%);
bottom: 35%;
left: 80%;
}
#org7{
transform: translate(-50%, 0%);
bottom: 20%;
left: 50%;
}
.org:hover .org-box{
background: #C3073F;
animation: org 1s;
animation-fill-mode: forwards;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="con">
<div class="con-title">Contributions</div>
<div class="org-map">
<div class="org" id="org1">
<div class="org-box">
<img src="" alt="">
</div>
</div>
<div class="org" id="org2">
<div class="org-box">
<img src="" alt="">
</div>
</div>
<div class="org" id="org3">
<div class="org-box">
<img src="" alt="">
</div>
</div>
<div class="org" id="org4">
<div class="org-box">
<img src="" alt="">
</div>
</div>
<div class="org" id="org5">
<div class="org-box">
<img src="" alt="">
</div>
</div>
<div class="org" id="org6">
<div class="org-box">
<img src="" alt="">
</div>
</div>
<div class="org" id="org7">
<div class="org-box">
<img src="" alt="">
</div>
</div>
<svg width="500" height="500">
<line id="line1"/>
<line id="line2"/>
</svg>
</div>
</div>

纯JavaScript

3. 您可以使用Element.getBoundingClientRect()方法获取有关div块的更多信息。

4. 在这种情况下，在计算中，有必要考虑SVG元素本身的位置。为此，我们从点的绝对坐标中减去SVG左上角的相应坐标。

这是一个没有jQuery的JavaScript代码示例:

let line1 = document.getElementById('line1');
let svgRect = document.getElementById('lines').getBoundingClientRect();
let rect1 = document.getElementById('org1').getBoundingClientRect();
let rect2 = document.getElementById('org2').getBoundingClientRect();
let dot1x = (rect1.left + rect1.right) / 2;
let dot1y = (rect1.top + rect1.bottom) / 2;
let dot2x = (rect2.left + rect2.right) / 2;
let dot2y = (rect2.top + rect2.bottom) / 2;
setAttributes(line1, {
'x1': dot1x - svgRect.left,
'y1': dot1y - svgRect.top,
'x2': dot2x - svgRect.left,
'y2': dot2y - svgRect.top,
'stroke': 'red',
'stroke-width': 4,
});
// helper function from https://stackoverflow.com/a/12274782/6263942
function setAttributes(el, attrs) {
for(var key in attrs) {
el.setAttribute(key, attrs[key]);
}
}

.con {
margin-top: 50px;
}
.con-title {
width: 100%;
text-align: center;
color: #4E4E50;
font-size: 40px;
font-weight: bold;
}
.org-map {
position: relative;
width: 300px;
height: 300px;
margin: 40px auto 0 auto;
}
.org {
position: absolute;
}
.org .org-box {
position: relative;
bottom: 0px;
width: 15px;
height: 15px;
border-radius: 20px;
background: #4E4E50;
transition: 0.6s;
}
#org1 {
transform: translate(-50%, 0%);
bottom: 80%;
left: 50%;
}
#org2 {
transform: translate(-50%, 0%);
bottom: 65%;
left: 20%;
}
#org3 {
transform: translate(-50%, 0%);
bottom: 35%;
left: 20%;
}
#org4 {
transform: translate(-50%, 0%);
bottom: 50%;
left: 50%;
}
#org5 {
transform: translate(-50%, 0%);
bottom: 65%;
left: 80%;
}
#org6 {
transform: translate(-50%, 0%);
bottom: 35%;
left: 80%;
}
#org7 {
transform: translate(-50%, 0%);
bottom: 20%;
left: 50%;
}
.org:hover .org-box {
background: #C3073F;
animation: org 1s;
animation-fill-mode: forwards;
}

<div class="con">
<div class="con-title">Contributions</div>
<div class="org-map">
<div class="org" id="org1">
<div class="org-box">
<img src="" alt="">
</div>
</div>
<div class="org" id="org2">
<div class="org-box">
<img src="" alt="">
</div>
</div>
<div class="org" id="org3">
<div class="org-box">
<img src="" alt="">
</div>
</div>
<div class="org" id="org4">
<div class="org-box">
<img src="" alt="">
</div>
</div>
<div class="org" id="org5">
<div class="org-box">
<img src="" alt="">
</div>
</div>
<div class="org" id="org6">
<div class="org-box">
<img src="" alt="">
</div>
</div>
<div class="org" id="org7">
<div class="org-box">
<img src="" alt="">
</div>
</div>
<svg width="500" height="500" id="lines">
<line id="line1"/>
<line id="line2"/>
</svg>
</div>
</div>