D3js 条形图中未定义的 .call()

Question

我正在尝试在 Angular 4 中使用 D7JS v7 实现平移和缩放功能。当我在缩放函数中调用 this.g 时，它会给我一个错误，说 .call(( 未定义。让我知道你们是否有任何参考

我正在使用这些参考 http://codexe.net/d3/d3-zoom.html 来实现该功能

this.width =
        +this.svg.attr("width") - this.margin.left - this.margin.right;
      this.height =
        +this.svg.attr("height") - this.margin.top - this.margin.bottom;
      //add zoom function
      var zoom = d3
        .zoom()
        .scaleExtent([1, 30]) //can treat as the space between two ticks. sets the scale extent to the specified array of numbers [k0, k1] where k0 is the minimum allowed scale factor and k1 is the maximum allowed scale factor
        .translateExtent([
          [-this.width, -this.height],
          [2 * this.width, 2 * this.height]
        ]) 
       //the area top left to bottom right
        .on("zoom", () => {
          this.g.call(getX.scale(d3.event.transform.rescaleX(getX)));
          this.g.call(getY.scale(d3.event.transform.rescaleY(getY)));
        });
      this.g = this.svg
        .append("g")
        .attr(
          "transform",
          "translate(" + this.margin.left + "," + this.margin.top + ")"
        )
        .call(zoom);
      //Initialize Axis
      this.x = d3Scale
        .scaleBand()
        .rangeRound([0, this.width])
        .padding(0.85);
      this.y = d3Scale.scaleLinear().rangeRound([this.height, 0]);
      this.x.domain(this.totalStores.map(d => d.store));
      this.y.domain([0, d3Array.max(this.totalStores.map(d => d.storeCount))]);
      //Draw grids
      var getX = this.x;
      function make_x_gridlines() {
        return d3Axis.axisBottom(getX);
        //.ticks(4)
      }
      var getY = this.y;
      function make_y_gridlines() {
        return d3Axis.axisLeft(getY).ticks(4);
      }
      //Draw Axis
      this.g
        .append("g")
        .attr("transform", "translate(18," + this.height + ")")
        .attr("color", "#ebecf5")
        .call(make_x_gridlines().tickSize(-this.height))
        .style("text-anchor", "end");
      this.g
        .append("g")
        .attr("class", "line-x")
        .attr("color", "#ebecf5")
        .call(make_y_gridlines().tickSize(-this.width))
        .append("text");
      //Draw Bars
      this.g
        .selectAll(".bar")
        .data(this.totalStores)
        .enter()
        .append("rect")
        .attr("rx", 3)
        .attr("class", "bar")
        .style("cursor", "pointer")
        .attr("x", d => this.x(d.store) - 0)
        .attr("y", d => this.y(d.storeCount))
        .attr("width", this.x.bandwidth())
        .attr("height", d => this.height - this.y(d.storeCount))
        .on("click", function demo(d: any) {
          selfFunctionCall.singleBarClick();
        })
        .attr("fill", this.setDonutChartIndex.color);

Answer 1

根据文档，将调用缩放处理程序函数

将this上下文作为当前 DOM 元素。

这样做

会丢失this上下文，因此会失去对this.g的引用。但是，您可以使用箭头函数从封闭的词法范围内捕获this上下文：

.on("zoom", () => {
    this.g.call(getX.scale(d3.event.transform.rescaleX(getX))); //rescaleX - change the xScale domain with the transforming info
    this.g.call(getY.scale(d3.event.transform.rescaleY(getY))); //rescaleY - change the yScale domain with the transforming info
});