javascript - 如何动态地在两个元素之间划线(不知道它们的坐标)？

Question

我有 2 个元素，一个 circle 和一个 rectangle。两者都在不同的 g 元素中。当我学习 d3.js 时，我希望使用每个元素的 id 选择器，我可以创建一个连接两个元素的 line 。我不知道该怎么做，我已经阅读了属性 getBoundingClientRect 我可以获得 svg 中每个元素的真实属性但是当我得到错误时使用它。

我该怎么做？

var svg=d3.select("svg");
var g1=svg.append("g");
var g2=svg.append("g");

var rect=g1.append("rect").attr("id","myrect").attr("width",100).attr("height",100).attr("x",0).style("fill","blue");
var circle=g1.append("circle").attr("id","mycircle").attr("r",30).attr("cx",500).attr("cy",100).style("fill","red");

let origin= d3.select("#myrect");
let destiny= d3.select("#mycircle");
/*svg.append("line") 
  .style("stroke", "black") // colour the line
  .attr("x1", origin.x) // x position of the first end of the line
  .attr("y1", origin.y) // y position of the first end of the line
  .attr("x2", destiny.x) // x position of the second end of the line
  .attr("y2", destiny.y); // y position of the second end of the line
}*/
//.getBoundingClientRect()

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<svg style="width:1000px;height:500px; border:1px solid red;"></svg>

Answer 1

有更好的方法可以做到这一点，但在这个答案中，我将遵循您的方法。

在 D3 中，像 attr() 这样只有一个参数的方法是 getters:

+origin.attr("x")

这将获取矩形的 x 属性。一元加号在这里很重要，因为 getter 返回一个字符串，而不是一个数字。所以，只需获取矩形的位置，加上半宽/半高，然后获取圆的位置:

var svg=d3.select("svg");
var g1=svg.append("g");
var g2=svg.append("g");

var rect=g1.append("rect").attr("id","myrect").attr("width",100).attr("height",100).attr("x",0).style("fill","blue");
var circle=g1.append("circle").attr("id","mycircle").attr("r",30).attr("cx",500).attr("cy",100).style("fill","red");

let origin= d3.select("#myrect");
let destiny= d3.select("#mycircle");
svg.append("line") 
  .style("stroke", "black") 
  .attr("x1", +origin.attr("x") + +origin.attr("width")/2) 
  .attr("y1", +origin.attr("y") + +origin.attr("height")/2) 
  .attr("x2", +destiny.attr("cx")) 
  .attr("y2", +destiny.attr("cy")); 

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<svg style="width:1000px;height:500px; border:1px solid red;"></svg>