0

I'm working with d3 version 7.4.0 and I noticed that the callback/handler for the 'on' event in the drag behavior only has a single argument, contrary to what I read in the docs https://github.com/d3/d3-drag. I was wondering how I can implement a simple drag and drop of an svg circle. Thank you.

    this.player = this.container
      .append("circle")
      .attr("cx", 1000)
      .attr("cy", 1000)
      .attr("r", 20)
      .attr("fill", "pink")
      .call(
        <any>(
          d3
            .drag<SVGCircleElement, DragEvent>()
            .on("start", function (event: DragEvent, d: any) { 
              console.log("e>>", event);
              console.log("d>>", d); // d is undefined
              d3.select(this).attr("cx", event.x).attr("cy", event.y); // I would probably want to do something like attr('cx', d.x + event.x)
              // this.cx = event.x;
            })
        )
      );

from docs:

function dragged(event, d) {
    circle.raise().attr("cx", d.x = event.x).attr("cy", d.y = event.y);
  }
reactor
  • 1,722
  • 1
  • 14
  • 34
  • There's a v7 circle drag Q&A here: https://stackoverflow.com/questions/72840238/why-does-d3-circle-position-virtually-reset-after-drag – Robin Mackenzie Jul 03 '22 at 10:58
  • You haven't bound any data to the circle, `d` represents the bound data of the circle, so it is undefined. Try .append("circle").datum(someValue) and see what you get when logging `d`. – Andrew Reid Jul 06 '22 at 02:27

0 Answers0