Javascript 一组html表格顶部的箭头？

我有一组html表（在我的ReactJS代码中动态生成）。 下面是一个例子：

---

我想在一些单元格（特别是具有相同编号的单元格）之间绘制圆弧。一个想法是创建一个透明的SVG并在SVG文件中绘制箭头。但我感到困惑的是，如何指定圆弧的起点和终点（以便它们与正确的单元格对齐）。有人给我出主意吗

与我的评论相关的答案：我同样需要画一张图表，我需要完全控制一个学校项目（你可以看到结果）

当时我使用的是angular，如果您从未使用过它，那么标记的

ng repeat

属性只是输出当前dom元素的

循环

<div class="route"
     ng-repeat="route in routes"
     style="
       left: {{ route.source.x }}px;
       top: {{ route.source.y }}px;
       width: {{ route.distance }}px;
       transform: rotate({{ getAngle(route) }}rad);
       -webkit-transform: rotate({{ getAngle(route) }}rad);"
>▶</div>

下面是
路线
类的CSS：

.route {
  height: 12px;
  margin-top: -10px;
  padding-bottom: -2px;
  text-align: right;
  border-bottom: 1px solid black;
  -webkit-transform-origin: 0 0px;
  transform-origin: 0 0px;
}

你可能需要稍微摆弄一下CSS以使所有内容居中，但这是一个想法。
哈奇，但是如何获取单元格的位置（例如jQuery）并使用CSS3绘制箭头（绝对定位div-
宽度：箭头的长度，高度：1px；变换：旋转
）？我就是这样做的：。我建议使用将数据绑定到表。（这非常简单，是d3的一个很好的介绍）然后，在arrow生成代码中，组装或更新第二个数据集，并使用d3将其绑定到一组新的svg元素。在d3构造svg对象的代码中，您应该能够使用完整的数据集来帮助定位箭头
.route {
  height: 12px;
  margin-top: -10px;
  padding-bottom: -2px;
  text-align: right;
  border-bottom: 1px solid black;
  -webkit-transform-origin: 0 0px;
  transform-origin: 0 0px;
}