Responsive D3 svg: координаты подсказок, отображаемых при наведении мыши, отключены

Question

Я создал отзывчивый SVG, используя D3.js и Vue. Он содержит некоторые текстовые элементы (в следующем фрагменте они называются node ). При наведении курсора подсказка должна появиться рядом с текущим узлом. В моем фрагменте расположение этих всплывающих подсказок отключено.

В зависимости от ширины окна браузера, всплывающая подсказка может отображаться справа или слева от узла. Расстояние может быть больше для узлов с более высокими индексами.

let vm = new Vue({
  el: '#app',
  
  data: {
    svg: undefined,
    
    tooltip: undefined,
    
    words: [1, 2, 3]
  },
  
  mounted() {
    /* Set up SVG */
    this.svg = d3.select('#app')
                 .append('svg')
                 .attr('id', 'tree-svg')
                 .attr('viewBox', '0 0 700 500')

                 // Set up group to contain all tree elements
                 .append('g');
    
    
    /* Set up nodes */
    this.svg
        // Store all SVG text elements in an array
        .selectAll('text')

        // Specify an array as data source for subsequent steps
        .data(this.words)

        // Select all elements from the source array
        .enter()

        // Create a text element for all elements in the enter selection
        .append('text')
        .text((d) => { return 'node' + d; })

        // x and y coordinates
        .attr('x', function(d, i, n) {
            return i * 80 + 80;
        })
    
        .attr('y', function(d, i, n) {
            return 30;
        })

        // Attach event handler
        .on('mouseover', this.handleMouseOver);
      
      
        /* Set up tooltip */
        this.tooltip = d3.select('#app')
                         .append(function() { return document.createElement('p') })
                         .classed('edge-tooltip', true);
  },
  
  
  methods: {
    handleMouseOver: function(d, i, n) {
      let targetElement = n[i];
      
      this.tooltip.style('top', parseInt(targetElement.getAttribute('y')) + 'px')
                  .style('left', parseInt(targetElement.getAttribute('x')) + 'px')
                  .text('bar')
                  .style('visibility', 'visible');
  }
}
});

svg {
    border: 1px solid gray;
}
    
.edge-tooltip {
        position:         absolute;
        z-index:          30;            
        border:           1px solid gray;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id='app'></div>

Что не так с кодом май? Как последовательно разместить всплывающие подсказки?