D3.js 在进行转换时，如何介于d3元素的属性值之间？

我试图构建一个简单的svg游戏来捕捉一个移动的圆圈。有一个接球圈，一个移动的球圈和一个接球按钮。catchCircle从屏幕底部开始垂直移动，穿过preyCircle并在顶部消失。这样做的目的是在preyCircle与catchCircle重叠时单击按钮。在这种情况下，我只需要检查两个圆的cy属性的距离是否小于它们的半径之和

我在这里面临的问题是在转换过程中获取catchCircle的cy属性。如果我试图从onclick事件方法内部获取preyCircle.attr'cy'，错误如下所示： 未捕获错误：太晚了；已经在运行

抓住我 常数宽度=200，高度=300，半径=10； const svg=d3。选择“画布” .append'svg' .attr'width'，width .attr'height'，height； const catchCircle=svg.append'circle' .attr'r'，半径 .attr'cx'，宽度/2 .attr'cy'，100 .attr'stroke'，'red' .attr'stroke-width'，3 .attr'填充'，'无'； const preyCircle=svg.append'circle' .attr'r'，半径 .attr'cx'，宽度/2 .属性，高度-半径 .attr'fill'，'red' 过渡 .期限5000 .延迟1000 .attr'cy'，半径 去除 d3.选择“catchMe” 。在“单击”时，=>{ 捕获=错误； //需要获取单击时catchCircle和preyCircle是否重叠 //我被困在这里！！！ 常量msgSpan=d3。选择“msg”； msgSpan.node.textContent=捕获？完美！：：哦，不！：； }; 我的代码正在运行

---

有人能指引我该走的路吗？提前感谢。

首先将Id添加到您的圈子中

const catchCircle = svg.append('circle')
    .attr('r', radius)
  .attr('cx', width / 2)
  .attr('cy', 100)
  .attr("id", "catch") //add ID
  .attr('stroke', 'red')
  .attr('stroke-width', 3)
  .attr('fill', 'none');

const preyCircle = svg.append('circle')
    .attr('r', radius)
  .attr('cx', width / 2)
  .attr('cy', height - radius)
  .attr('fill', 'red')
  .attr("id", "prey") //add ID 
  .transition()
    .duration(5000)
    .delay(1000)
    .attr('cy', radius)
    .remove();

接下来，在按钮上按do：

d3.select('#catchMe')
    .on('click', () => {
    catched = false;
     let py = d3.select("#prey").attr("cy"); // get prey's y
     let px = d3.select("#prey").attr("cx"); // get prey's x
     let pr = +d3.select("#prey").attr("r"); // get prey's radius

     let cy = d3.select("#catch").attr("cy");
     let cx = d3.select("#catch").attr("cx");
     let cr = +d3.select("#catch").attr("r");

     //Pythagoras distance formula
     let distance = Math.pow(px-cx, 2) + Math.pow(py-cy, 2);
     catched = Math.sqrt(distance) < cr + pr; //check if overlap

    const msgSpan = d3.select('#msg');
    msgSpan.node().textContent = catched? "Perfect! :)" : "Oh no! :(";
  });

工作代码