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.

when you are trying to use variables inside javascript/jQery text then you use `++`symbol along with single or double quotes. Also you can do `.attr('transform','translate('+(d3.event.x-250)+','+(d3.event.y-250)+')')` directly. — Serving Quarantine period, Mar 12 '20 at 07:48
Does this answer your question? [What does this symbol mean in JavaScript?](https://stackoverflow.com/questions/9549780/what-does-this-symbol-mean-in-javascript) — Serving Quarantine period, Mar 12 '20 at 07:49
https://stackoverflow.com/questions/3469885/somevariable-vs-somevariable-in-javascript — Serving Quarantine period, Mar 12 '20 at 07:50

score 2 · Accepted Answer · answered Mar 12 '20 at 10:42

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 ) + ')')

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

1 Answers1