D3.js 如何使用任何布局将圆圈从一个svg文件连接到d3中同一html页面上的另一个svg文件

我在html页面上有两个div，id为container1和container2。我已经为每个div创建了svg，每个svg都包含圆圈，现在我想连接两个圆圈

是否可以从同一页面上的两个svg文件连接两个圆圈cx，两个圆圈的cy应自动生成

我的代码是snnipet

Html

并使用force布局为每个容器绘制圆

现在我想用直线连接这两个圆

---

它是如何可能的？？？

对于您的一般性问题“它是如何可能的？”，这里有一个让您开始的一般方法：

Super使用绝对定位在整个页面上强制使用第三种基本透明的SVG。在这个SVG中画一条线

使用get screen累积变换矩阵计算页面上每个圆的位置

使用相同的函数计算从屏幕到覆盖SVG的转换，并将一个屏幕CTM乘以另一个屏幕CTM的倒数，以获得净转换，这样您就可以根据圆的坐标计算出直线的起点和终点坐标

为任何重新布局事件将侦听器作为一个整体添加到网页，并根据需要重新执行上述计算

如果所有这些听起来都太令人困惑，那么您可能需要提出一种替代的网页设计，将所有图形放在一个SVG中。或者一种允许以不同的方式指示元素连接到同一颜色，或者将鼠标悬停在其中一个上会导致另一个高亮显示

---

另外，您可能可以使用来替换步骤2和步骤3，但您需要彻底测试这一点。我从未尝试过使用它来查找同一网页上不同SVG中元素之间的转换。

根本不清楚您想要实现什么。也许添加一张你想要的图片会有所帮助。但是，Stackoverflow不是一种代码编写服务。请展示您已经尝试解决的问题，并解释为什么它不是您想要的。

<div id="container1 " style="width:900px;height:800px;border:solid;"></div>
<div id="container2 " style="width:900px;height:100px;border:solid; margin-top: 25px;"></div>

created svg for container1 ,container2  using below code
  var svg = d3.select("#"+id).append("svg")
                           .attr("width", $("#"+id).css("width"))
                           .attr("height",$("#"+id).css("height"));