Question

我正在从https://codepen.io/meerkat00/pen/LQNYrv处获取一个d3项目，并将其转换为信号文件组件VueJS项目。除点击处理程序外，大多数功能都有效。不知道如何去做。

在显示组件方法中，它为子级/矩形设置点击处理程序：

export default {
name: 'TreeMapDrillDown',
components: {d3, Vue},
props: {},
data: function () {
return {
  width: 960,
  height: 600,
  margin: {top: 24, right: 0, bottom: 0, left: 0},
  treemap: null,
  transitioning: false,
  uscg_jsonData : jsonData,
  formatNumber: d3.format(",d"),
  svg: null,
  grandparent: null,
  thisComponent: null
  } 
},
methods: {

 display(d)
 {
   var self = this;
   self.grandparent.datum(d.parent)
   .on("click", transition(d))
   .select("text")
   .text(this.name(d));

   var g1 = self.svg.insert("g", ".grandparent")
     .datum(d)
     .attr("class", "depth");

   var g = g1.selectAll("g").data(d._children).enter().append("g");

   g.filter(function(d){ return d._children})
     .classed("children", true)
     .on("click", transition(d));

  function transition(d)
  {
      var self = this;
      if (self.transitioning || !d) return;
      self.transitioning = true;
  }

 },
 name(d){},
}

问题是当单击对象并调用转换方法时，作用域是单击的对象-不是vue实例。使用

self = this;

技术行不通，因为此时不再定义自我。如何访问vue实例以获取成员变量和/或方法？

我尝试在点击处理程序中将this传递给它，但是self最终未定义，因此无法正常工作。

display(d)
{
 self = this;

 g.filter(function(d){return d._children})
 .classed("children", true)
 .on("click", transition(d, self));

}

如何从匿名函数访问Vue实例

0 个答案: