Q:

How to use translateX and translateY in D3.js?

I built a dragging event and I want the element to be dragged only when the coordinates are multiples of 10:
    const x = d3.event.x
    const y = d3.event.y

    if (x % 10 === 0) {
      d3.select(this)
        .attr('transform', 'translateX(' + x + ')')
    }

    if (y % 10 === 0) {
      d3.select(this)
        .attr('transform', 'translateY(' + y + ')')
    }

However, I get errors like this when I drag:
Error: Invalid value for <rect> attribute transform="translateX(180)"

Maybe I'm using the translate property in the wrong way? What's the correct way of doing it?

A:

There is no attribute as translateX/translateY 
You can do the above like this.
    const x = d3.event.x
        const y = d3.event.y
   //old translate
    var translate = d3.transform(d3.select(this).attr("transform")).translate;
        if (x % 10 === 0) {
          //maintain the y translate to old
          d3.select(this)
            .attr('transform', 'translate(' + x +','+ translate[1]+')')
        }

        if (y % 10 === 0) {
          d3.select(this)
          //maintain the x translate to old
            .attr('transform', 'translate(' + translate[0] +','+ y+')')
        }

Hope this helps!

