不寻常的d3放大可重复使用的类 - 这和绑定

Question

一段时间以来我一直在讨论这个问题......

我在js中有一个通常的构造函数/原型对象(如类),它包含我所有的d3图表逻辑:

figureGen = function(html_element) {
  this.svg = d3.select(html_element)
    .append('svg')
    .style('width', '100%')
    .style('height', '100%')
    .append('g')
      .attr("class", "sadrzalac")
      .attr("transform", "translate(" + 0 + "," + 0 + ")");
      this.element = element;
      this.data = [];
      this.yRange = d3.scale.linear();
      this.xRange = d3.scale.linear();
      this.xAxis = undefined;
      this.yAxis = undefined;
      this.width = undefined;
      this.height = undefined;
      this.zoom = undefined;
      this.margin = {top: 20, right: 20, bottom: 20, left: 35};
      this.svg.append("rect") 
       .attr("class", "clipPath")
       .attr("transform", "translate(" + this.margin.left + "," + -this.margin.top + ")");
      this.svg.append('g')
       .attr("class","xaxis axis");
      this.svg.append('g')
      .attr("class", "yaxis axis");
}

对于构造函数,以及类似这样的方法

figureGen.prototype = {
    constructor: figureGen,
    init: function(sampledata, width, height){
       var y_min = Number(d3.min(this.podaci, function (d) { return d.y;})); 
       var y_max = Number(d3.max(this.podaci, function (d) { return d.y;}));
       var x_min = Number(d3.min(this.podaci, function (d) { return d.x;}));
       var x_max = Number(d3.max(this.podaci, function (d) { return d.x;}));

       var ukupan_opseg = y_max - y_min;
       var spacer = (ukupan_opseg*25)/100;

       this.xRange = d3.scale.linear().range([this.margin.left + 10, this.width - this.margin.right]).domain([x_min, x_max]);
       this.yRange = d3.scale.linear().range([this.height - this.margin.top, this.margin.bottom]).domain([y_min-spacer, y_max+spacer]);

      this.zoom = d3.behavior.zoom()
        .x(this.xRange)
        .y(this.yRange)
        .scaleExtent([1, 5])
        .center([this.width / 2, this.height / 2])
        .size([this.width, this.height])
        .on("zoom", this.zoomProcess());

       this.svg
        .attr("width", this.sirina)
        .attr("height", this.visina)
        .call(this.zoom);

        this.xAxis = d3.svg.axis()
           .scale(this.xRange)
           .innerTickSize(-this.height+40)
           .outerTickSize(5)
           .tickPadding(10)
           .tickFormat(d3.format("d"));

        this.yAxis = d3.svg.axis()
           .scale(this.yRange)
           .orient("left")
           .innerTickSize(-this.width)
           .outerTickSize(5)
           .tickPadding(10)
           .tickSubdivide(false);

       this.svg.select('.xosa')
           .attr("transform", "translate(0," + (this.height - this.margin.bottom) + ")")
           .call(this.xAxis);

       this.svg.select(".yosa")
           .attr("transform", "translate(" + (this.margin.left) + ",0)")
           .call(this.yAxis);
  },
  zoomProcess: function{
      this.svg.select(".xaxis").call(this.xAxis);
      this.svg.select(".yaxis").call(this.yAxis);
      console.log(this.svg);
  }
}

问题出在zoomProcess方法中,它始终返回(记录)this.svg上的HTML元素,而不是this.svg对象,可以选择.select.缩放行为已正确附加到我的元素,并且在鼠标上开始缩放但它会弹出一个错误,指出无法执行此.xall上的.call.

当我从另一个源触发zoomProcess时,甚至更奇怪的是,如按钮单击其控制台日志输出正确的this.svg对象而不是HTML元素,因此似乎错误来自缩放事件处理程序.这有什么不对？

这些是我一直在关注的两个例子:
http://bl.ocks.org/stepheneb/1182434
http://bl.ocks.org/mbostock/7ec977c95910dd026812

编辑: 现在我想我可能应该在这个对象上使用.bind(),以便在使用zoomProcedura方法时它的引用保持不变.我还不知道该怎么做.

Answer 1

我认为您的实际代码中不存在拼写错误......

  zoomProcess: function{
      this.svg.select(".xaxis").call(this.xAxis);
      this.svg.select(".yaxis").call(this.yAxis);
      console.log(this.svg);
  }  

可能是...

  zoomProcess: function(){
      this.svg.select(".xaxis").call(this.xAxis);
      this.svg.select(".yaxis").call(this.yAxis);
      console.log(this.svg);
  }

或者可能...

  zoomProcess: function(){
      return function() {
          this.svg.select(".xaxis").call(this.xAxis);
          this.svg.select(".yaxis").call(this.yAxis);
          console.log(this.svg);
      }
  }

我不能确定。我假设你真的是在调用......

    .on("zoom", this.zoomProcess());

不是...

    .on("zoom", this.zoomProcess);

但无论如何，基于这个假设，为了让它按照你想要的方式工作，尝试......

  zoomProcess: function(){
      //'this' is figureGen.prototype
      var that = this;
      return function () {
          //'this' is window
          that.svg.select(".xaxis").call(that.xAxis);
          that.svg.select(".yaxis").call(that.yAxis);
          console.log(that.svg);
      }
  }  

或者...

  zoomProcess: function(){
      //'this' is figureGen.prototype
      return function () {
          //'this' is figureGen.prototype
          this.svg.select(".xaxis").call(this.xAxis);
          this.svg.select(".yaxis").call(this.yAxis);
          console.log(this.svg);
      }.bind(this)
  }