Javascript 使用ES6类在D3可重用图表中添加缩放功能

我正在将可重用的D3V5图表转换为使用ES6类，并且在实现更新变量的函数（如缩放函数）时遇到困难。到目前为止，我有一张工作地图：

class myMap{
  constructor(args = {}){

    this.data = args.data;
    this.topo = args.topo;
    this.element =document.querySelector(args.element);
    this.width =args.width || this.element.offsetWidth;
    this.height = args.height || this.width / 2;


    this.setup();
 }

setup(){
this.projection = d3.geoMercator()
                         .translate([(this.width/2), (this.height/2)])
                         .scale( this.width / 2 / Math.PI);

this.path = d3.geoPath().projection(this.projection);

   // zoom fuction inserted here
  this.element.innerHTML ='';
    this.svg =d3.select(this.element).append("svg")
                 .attr("width", this.width)
                 .attr("height", this.height)
                 //.call(zoom)
                 .append("g");

  this.plot = this.svg.append("g");  
   d3.json(this.topo).then( world => {

    var topo = topojson.feature(world, world.objects.countries).features;

    this.draw(topo);
    });

   }


draw(topo){

var country = this.plot.selectAll(".country")
                 .data(topo);

  country.enter().insert("path")
      .attr("class", "country")
      .attr("d", this.path)
      .attr('id', 'countries')
      .attr("fill", #cde)
      .attr("class", "feature");

  }
 //move(){} goes here  

}

这称为使用：

const chart = new myMap({
  element: '#map',
    data: DATA_IN_JSON,
    topo:"../../../LINK_to_topojsonfile"});

在使用函数时，我通过使用变量和调用move函数添加了缩放，并在SVG中附加了一个

.call（zoom）

：

var zoom = d3.zoom()
    .scaleExtent([1, 9])
    .on("zoom", move);

function move() {
  g.style("stroke-width", 1.5 / d3.event.transform.k + "px");
  g.attr("transform", d3.event.transform);
}

使用类，我尝试在类的

setup（）

部分声明zoom，调用move form

.on（“zoom”，this.move）

并将

call

函数附加到SVG，如上面的注释所示。但是我得到了一个

未捕获类型错误：当引用
this.plot时，无法在move函数中读取SVGSVGElement.move中未定义的属性'style'

const zoom = d3.zoom()
               .scaleExtent([1, 9])
               .on("zoom", this.move);

 move() {
   this.plot
       .style("stroke-width", 1.5 / d3.event.transform.k + "px");
   this.plot
       .attr("transform", d3.event.transform);
 }

您需要绑定此

const zoom = d3.zoom()
    .scaleExtent([1, 9])
    .on("zoom", this.move.bind(this));

console.log将
此
记录在
move（）
正常工作的内部。所以现在我必须弄清楚绑定（这个）部分的作用。谢谢，我不知道你为什么要下载@altocumulus nope的voted可能的副本。这不是真的。这是问一个使用.bind（this）访问类中的事件处理程序而不是函数中的事件处理程序的具体情况，你列为副本。你是对的，我的错！我想把它作为类方法的副本关闭。这个问题被标记为我第一次错误地提到的问题的重复。尽管如此同样的原则也适用于JS类，因为JS类只是底层原型语言经常引用的语法糖。@altocumulus我同意概念是一样的，但我永远无法通过搜索找到我的问题的答案。这就是为什么重复的问题只要质量好就不会被删除或删除被认为是坏的；它们只是同一问题的不同切入点。我已经开始在rioV8的帖子上写我自己的答案了，当时我想这个话题一定已经被讨论过很多次了，事实证明，它已经被讨论过很多次了。我在之前的评论中提到的两个问题都很好地解释了我想到的三个解决方案。