Vue d3 set属性回调无法访问Vue数据属性

Question

更新 svgHeight密钥中的this中存在显示_data的新屏幕截图。 我在Vue中有一个组件，我想用d3绘制两个矩形。我尝试使用Vue组件中定义的回调方法设置rect元素的x和y属性。

但我无法在此回调中访问Vue组件的数据属性集。 这是我的组件，我进一步感到困惑，因为当我点击调试器并直接在Chrome DevTools控制台中执行console.log(this.svgHeight) 时，它会记录数据中定义的svgHeight

<template>
  <v-container class="travel-pattern">
    <v-layout>
      <v-flex xs12 id='svg-container'>

      </v-flex>
    </v-layout>
  </v-container>
</template>

<script>
/* eslint-disable no-undef */
/* eslint-disable no-unused-vars */
export default {
  name: 'travel-pattern',
  data () {
    return {
      msg: 'Travel Pattern component',
      dataset: [{h: 50, w: 100}, {h: 80, w: 200}],
      svgHeight: 100,
      svgWidth: 500
    }
  },
  methods: {
    getRectHeight: d => {
      return d.h
    },
    getRectWidth: d => {
      return d.w
    },
    getRectX: (d, i) => {
      return (i * d.w) + 25
    },
    getRectY: function () {
      // return 50
      debugger
      let x = this.svgHeight // here x gets undefined.
      return (x)
    },
    getClickEvent: d => {
      debugger
    }
  },
  mounted () {
    // 1. Draw two rectangles
    // 2. Each rectangle can be clicked
    // 3. Once clicked a pop up will appear with a text field
    // 4. Entering a color in the text field will change the other rectangles color

    // Create an SVG element
    var svg = d3.select('#svg-container')
      .append('svg')
      .attr('height', this.svgHeight)
      .attr('width', this.svgWidth)

    // Create a rectangle for each dataset
    var rectangles =
      svg.selectAll('rect')
        .data(this.dataset)
        .enter()
        .append('rect')

    // Actually draw the rectangles
    rectangles.attr('x', this.getRectX)
      .attr('y', this.getRectY)
      .attr('width', this.getRectWidth)
      .attr('height', this.getRectHeight)

    rectangles.on('click', this.getClickEvent)
  }
}
</script>