Javascript Vue d3设置属性回调可以'；无法访问Vue数据属性

更新 显示

svgHeight

的新屏幕截图存在于

数据

键中的

中。
我在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>


/*eslint禁用无未定义*/
/*eslint禁用无未使用的变量*/
导出默认值{
名称：'旅行模式'，
数据（）{
返回{
msg:'行程模式组件'，
数据集：[{h:50，w:100}，{h:80，w:200}]，
svgHeight:100，
SVG宽度：500
}
},
方法：{
getRectHeight:d=>{
返回d.h
},
getRectWidth:d=>{
返回d.w
},
getRectX：（d，i）=>{
返回（i*d.w）+25
},
getRectY:函数（）{
//返回50
调试器
设x=this.svgHeight//此处x未定义。
返回（x）
},
getClickEvent:d=>{
调试器
}
},
挂载（）{
//1.画两个矩形
//2.可以单击每个矩形
//3.单击后，将出现一个带有文本字段的弹出窗口
//4.在文本字段中输入颜色将更改其他矩形的颜色
//创建一个SVG元素
var svg=d3。选择（“#svg容器”）
.append（'svg'）
.attr（'height'，this.svgHeight）
.attr（'width'，this.svgWidth）
//为每个数据集创建一个矩形
变量矩形=
svg.selectAll（'rect'）
.data（此.dataset）
.输入（）
.append（'rect'）
//实际绘制矩形
矩形.attr（'x'，this.getRectX）
.attr（'y'，this.getRectY）
.attr（'width'，this.getRectWidth）
.attr（'height'，this.getRectHeight）
矩形.on（'click'，this.getClickEvent）
}
}
@thanksd的可能重复项将其更改为正常功能，仍然相同。请查看屏幕截图。屏幕截图使其看起来像是存在
svgHeight
的值。单击
（…）
以显示
svgHeight
的值时会发生什么情况？@thanksd我添加了另一个屏幕截图，
svgHeight
的值存在并在
\u data
键中定义，同时您可以在
返回（x）处看到调试器
line和
x=undefined
。我看到
x
被设置为
100
。@thanksd的可能副本将其更改为正常函数，但仍然相同。请查看屏幕截图。屏幕截图使其看起来像是存在
svgHeight
的值。单击
（…）
以显示
svgHeight
的值时会发生什么情况？@thanksd我添加了另一个屏幕截图，
svgHeight
的值存在并在
\u data
键中定义，同时您可以在
返回（x）处看到调试器
line和
x=undefined
。我看到
x
被设置为
100
。