Question

我正在尝试构建一个简单的svg游戏来吸引一个不断发展的圈子。有一个catchCircle，一个移动的preyCircle和一个 Catch Me 按钮。 catchCircle从屏幕底部开始垂直移动，越过preyCircle并从顶部消失。这个想法是当preyCircle与catchCircle重叠时单击按钮。在那种情况下，我只需要检查两个圆的cy属性的距离是否小于其radius的和。

我在这里面临的问题是在过渡进行时获取cy的{{1}}属性。如果我尝试从catchCircle事件方法内部获取preyCircle.attr('cy')，则会显示错误： “未捕获的错误：为时已晚；已经在运行”

onclick

我的代码正在https://jsfiddle.net/avi5102005/uh627zt5/62/上运行。

有人可以指导我应该怎么走吗？预先感谢。

Answer 1

首先将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! :(";
  });

工作代码here

在过渡进行期间，如何获取d3元素的中间值？

1 个答案: