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

Question

我正在尝试使用 Angular 7 中的 D3JS v4 实现平移和缩放功能。 当我在缩放函数中调用 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

根据 documentation将调用缩放处理函数

with the this context as the current DOM element.

这样做您将丢失 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
});