Javascript 在几个html元素的固定位置之间绘制连接元素

我对网络编程相当陌生，所以如果我遗漏了一些明显的东西，请容忍我。我正在使用html、css和javascript来可视化不同的DNA序列。每个序列都表示为html元素的图形，并且具有与DNA序列长度相对应的固定长度。跨距位于每个图形中的固定点，以表示特定的图案。其中一个图形的代码如下所示（使用django作为我的web框架）：

{键为%，value.items%中的值为2}
{%if value2.start_position%}
{%endif%}
{%endfor%}

像这样，我在我的网页上创建了几个序列的表示，一个在另一个下面。现在这些序列中的一些可能彼此相似。我想以图形方式显示序列与下面显示的序列相似的区域，如下所示：

在上面的示例中，由graph1和2以及graph2和3表示的序列具有相似的区域，但是序列的总长度（以及因此在图形上表示的图案的显示大小）不同，导致graph2和3之间的蓝色元素更宽

因此，对于每个图，我有的是每个图应该表示的序列长度，每个图案在各自图上的开始和结束位置，以及每个图上相似区域的开始和结束位置，如果两个图（序列）包含相似区域（图中绿色）

所以我的问题是：如何使用html、css或javascript在两个图（图中为蓝色）之间创建表示相似区域的元素？（或者我可以在现有的基础上实现的其他任何东西）

任何关于我如何处理这件事的提示都会被告知，如果你有更多的问题，请告诉我

---

编辑：实际上我更喜欢svg解决方案，因为我认为它更适合集成到我的应用程序中

您可以使用svg或画布

这里是一个使用画布的极简主义方法。您可能需要依赖一个库，该库很可能提供与您的关系图相近的关系图

但抓伤永远不会痛

下面，每个图形负责正确缩放其轴

最终，吊架依赖于它们所依赖的图形来缩放相应的顶点

您可能希望显示更具条件的条，因此请使用条并可能为其指定一个布尔值，以指示是否应显示该条

你可以通过使用笔划线的重量来进一步设计画布的样式，但这只是一个演示，向你展示你可以轻松地将其拿起来

const canvas=document.querySelector（'canvas'）
设ctx=canvas.getContext（'2d'）
设条=[
[巴（200300）、巴（18002300）、巴（25004500）、巴（50005200）、巴（80008500）]，
[Bar（11001300）、Bar（30003800）、Bar（40004200）、Bar（70007500）]，
[Bar（1270）]
]
功能条（a，b）{返回[a，b]}
类图{
构造函数（{anchorY，width，min，max}）{
anchorY
这个。宽度=宽度
this.dw=宽度/（最大-最小）
this.min=min
this.max=max
}
绘图（条形图）{
//绘图栏
//调整条形图尺寸以适合画布
常数e=5
ctx.fillStyle='orange'
const scaledBars=bar.map（（[a，b]）=>[a，b，a*this.dw，b*this.dw]）
scaledBars.forEach（（[[uuz，dum，left，right]）=>{
ctx.fillRect（左，this.ancory-e，右，左，2*e）
})
//绘图线
ctx.strokeStyle='黑色'
ctx.beginPath（）
ctx.moveTo（0，此.anchorY）
ctx.lineTo（this.width，this.anchorY）
ctx.closePath（）
ctx.stroke（）
ctx.strokeStyle='绿色'
ctx.font='10px serif'
scaledBars.forEach（[origLeft，origRight，left，right]）=>{
ctx.strokeText（origLeft，左，this.anchorY-10）
如果（右-左>100）{
ctx.strokeText（origRight，right，this.anchorY-10）
}
})
}
//x将自动移动
移动到（x）{
ctx.moveTo（x*this.dw，this.anchorY）
}
lineTo（x）{
ctx.lineTo（x*this.dw，this.anchorY）
}
}
常数图=[
新图形（{ancory:100，width:canvas.width，min:1，max:10000}），
新图形（{ancory:200，width:canvas.width，min:1，max:8500}），
新图形（{ancory:300，width:canvas.width，min:1，max:4000}）
]
//g第一个图，（a，b）左，右锚定在第一个图中
//g2第二个图形，c右锚定，d左锚定在第二个图形中
功能吊架（g、a、b、g2、c、d）{
ctx.beginPath（）
g、 移至（a）
g、 线路图（b）
g2.lineTo（c）
g2.lineTo（d）
ctx.closePath（）
ctx.fillStyle='rgba（841471580.5）'
ctx.fill（）
}
常数[g1，g2，g3]=图
常数吊架=[
[g1、1800、4500、g2、3800、1100]，
[g1、8000、8500、g2、7500、7000]，
[g2、1100、3800、g3、2700、1]，
]
吊架。forEach（t=>吊架（…t））
图.forEach（（g，i）=>{
g、 绘图（条形图[i]）
})

canvas{background:#eeeeee；}

---

画布是禁止的吗？我可以集成到html代码中的所有内容都可以@user753642！我真的不知道画布上的限制是什么，但是看起来它在html中被大量使用，所以我想我可以使用它。你可以使用优秀的d3，也称为数据驱动程序文档。但是它只在画布上工作，所以你必须忘记html。谢谢你的回答！我将不得不阅读一些关于canvas的内容，以了解如何尝试在我的代码中实现您的答案，但我会在完成后尽快与您联系！

<div class="graph" style='--graph-length: {{sequence_length}}'>
        <hr class="line">
      {% for key, value2 in value.items %}
        {% if value2.start_position %}
            <span class='motif' style="--start: {{ value2.start_position }}; --stop: {{ value2.stop_position }};"></span>
        {% endif %}
      {% endfor %}
      </div>