-1

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.

Mehdi
  • 7,204
  • 1
  • 32
  • 44
Soonk
  • 332
  • 2
  • 14
  • 1
    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. – Alive to die - Anant 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) – Alive to die - Anant Mar 12 '20 at 07:49
  • https://stackoverflow.com/questions/3469885/somevariable-vs-somevariable-in-javascript – Alive to die - Anant Mar 12 '20 at 07:50

1 Answers1

2

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 ) + ')')
Mehdi
  • 7,204
  • 1
  • 32
  • 44