d3 js получить положение экрана после масштабирования и преобразования

Question

Я создал круг на карте, я имею в виду, что: g -> path, path ..., желтый круг

g.style(translate(0, 50px) rotateX(40deg) skewY(10deg) rotate(-15deg))
d3.zoom()
.on('zoom', function (){
  g.attr('transform', d3.event.transform)
})

поэтому я хочу создать основу формы cx, cy желтого круга . Я пробовал:

ctm = this.getCTM()
x = this.cx.animVal.value
y = this.cy.animVal.value
x = x * ctm.a + y * ctm.c + ctm.e
y = x * ctm.b + y * ctm.d + ctm.f

он работает хорошо с первого раза, но когда я оптимизировал d3.zoom (перемещение или масштабирование). cx, cy желтого круга, что я получил неправильно, а не реальное положение круга

кто-нибудь может это исправить? спасибо!

function draw_points() {
  setTimeout(function() {
    draw_points_hd()
    draw_points()
  }, 2000)
}

function draw_points_hd(){

  map_g.select('#user_points')
    .transition()
    .duration(1000)
    .style('opacity', 0)
    .remove()

  user_map_g = map_g.append('g')
    .attr('id', 'user_points')
    .selectAll('g')
    .data(function(){
      return user_selects
      // if(user_selects.length==0){
      //   return all_selects
      // } else {
      //   return user_selects
      // }
    })
    .enter()
    .append('g')
  user_map_g.append('circle')
    .attr('id', 'user_ctm_circle')
    .attr('cx', function(d){
      return projection(d['position'])[0]
    })
    .attr('cy', function(d){
      return projection(d['position'])[1]
    })
    .attr('r', 3)
    .attr('fill', 'yellow')
    .style('transform', 'translate(0, 50px)' + perspect)

  user_map_g.selectAll('#user_ctm_circle').each(function(d, i){

    // console.log(d3.select(this).node().__data__)

    // centre = document.getElementById('map_root').createSVGPoint();

    // bbox = d3.select(this).node().getBBox()
    // x = this.cx
    // y = this.cy
    // matrix = d3.select(this).node().transform.baseVal.consolidate().matrix
    // transformedCentre = centre.matrixTransform(matrix)

    ctm = this.getCTM()
    x = this.cx.animVal.value
    y = this.cy.animVal.value
    console.log(x, y)
    x = x * ctm.a + y * ctm.c + ctm.e
    y = x * ctm.b + y * ctm.d + ctm.f
    // console.log(x, y)
    user_map_g.append('path')
      .attr('d', 'M 0,0 q -40,-30 -40,-60'+
               'a 20,20 0,0,1 80,0' +
               'q 0,30 -40,60')
      .attr('transform', 'translate('+x+','+y+') scale(.1)')
      .attr('fill', 'url(#radialGradient)')
      .style('filter', 'url(#fuzzyFilter)')
      .transition()
      .duration(1000)
      .delay(Math.random() * 2000)
      .attr('transform', 'translate(0'+x+','+y+') scale(.2)')
  })
}

var zoom = d3.zoom()
  .scaleExtent([1, 2])
  // .translateExtent([
  //   [-100, -100],
  //   [width + 90, height + 100]
  // ])
  .on('zoom', function (){
    map_body.attr('transform', d3.event.transform)
  })
svg.call(zoom)