在每个点击事件上向前移动一个圆圈 100 像素

Question

I am learning D3.js. I wrote following code which moves the circle on click. I want to move this circle forward (+100px) from its current position on every click.

I want to do it without CSS

Following is my code

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)")})

Answer 1

The easiest way to achieve what you want is using a getter ( selection.attr("cx") ) to get the current position and increasing it. You can also use a translate , but since you're a D3 learner using the circle's cx attribute is probably easier to understand.

Here is a demo, each click increases 50px:

 const circle = d3.select("circle").on("click", function() { d3.select(this).transition().attr("cx", +d3.select(this).attr("cx") + 50) });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script> <svg width="500" height="100"> <circle cx="50" cy="50" r="30" fill="teal"></circle> </svg>

Have in mind that the getter always returns a string , so you have to coerce it to a number.

Also, since you have just one element in the selection and it has a name, you don't need d3.select(this) :

 const circle = d3.select("circle").on("click", function() { circle.transition().attr("cx", +circle.attr("cx") + 50) });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script> <svg width="500" height="100"> <circle cx="50" cy="50" r="30" fill="teal"></circle> </svg>