What do I have to use '+(x)+', '+(y)+' in D3? instead of using d3.event.x&d3.event.y?

Question

Always thank you guys for super kind and detailed guides. I just came across a curiosity in d3 syntax. I tried to move svg object imported from illustrator. Once I call drag function and move according to my mouse position, it spits out related to x&y position.

This question is not about meaning of += or ++. So please do not mark this question as a similar one as quesitons asknig meaning of +=.

However!

When I do the code below,

<script>
    var drag = d3.drag().on('drag',moving)
    // var xloc=5
    // var yloc=5

    function moving(){
  let xloc = d3.event.x
  let yloc = d3.event.y
  d3.selectAll('.furn1')
     .attr('transform','translate('+(xloc-250)+','+(yloc-250)+')')
  }



  d3.selectAll('g').classed('dragable',true)
  .call(drag)


</script>

The error is gone, and it works perfectly.

What is

'+( )+'

in this code? and why just d3.event.x is not working? I checked d3.event.x by adding it with d3.event.y. And the console.log value was number which means d3.event.x is already number not string.

Thank you guys in advance.

Answer 1

The syntax for a translate transform in SVG is: translate(x [,y]), with x and y being numbers.

In the shared portion of code, + operator is used to concatenate the coordinate values inside the string translate().

d3.event.x and d3.event.y could have been used directly, achieving the same effect:

.attr('transform','translate(' + ( d3.event.x -250 ) + ',' + ( d3.event.y - 250 ) + ')')