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) }

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

1 个答案: