Javascript 每点击一次，将圆圈向前移动100像素

我正在学习D3.js。我编写了下面的代码，它在单击时移动圆。我想在每次单击时将此圆从其当前位置向前移动（+100px）

我想做它没有CSS

下面是我的代码

var svgContainer = d3.select("body").append("svg").attr("id", "root")
  .attr("width", 500)
  .attr("height", 500).append("g")


//Draw the Circle
var circle = svgContainer.append("circle")
  .attr("id", "Zubi")
  .attr("cx", 100)
  .attr("cy", 30)
  .attr("r", 20)
  .on("click", function() {
    d3.select(this)
      .transition()
      .duration(3000)
      .style("fill", "red")
      .attr("cx", 100)
  })
//.attr("transform", "translate(200,200)")})

---

实现所需的最简单方法是使用getter（

selection.attr（“cx”）

）获取当前位置并增加它。您也可以使用

translate

，但由于您是D3学员，使用圆圈的

cx

属性可能更容易理解

这是一个演示，每次点击增加50像素：

const circle=d3.选择（“圆”）
.on（“单击”，函数（）{
d3.选择（本）
.transition（）
.attr（“cx”）和+d3。选择（此）.attr（“cx”）+50）
});

你好，杰拉尔多，非常感谢。在你回答之前几分钟，我几乎完全尝试了同样的技巧。你能告诉我它是如何影响我的试验结果的吗？attr（“cx”，d3.select（this）。attr（“cx”）+50）你的代码。attr（“cx”，+d3.select（this）。attr（“cx”）+50）请给我看一下翻译方法。我知道一点SVG，但我是D3新手。非常感谢again@Zubairtranslate的问题是，在获得
translate
字符串后，必须对其进行解析，这可能有点复杂。请看一下这个答案：