使用Angular 7的D3 V4条形图响应式

Question

我正在尝试使用D3 v4使条形图具有响应性，我使用了viewBox和prepareAspectRatio使其具有响应性，但是在屏幕调整大小时不会调整大小

下面是代码，请帮助我找出这些问题

<svg
    width="550"
    height="300"
    id="bar-chart"
    viewbox="0 0 300 550"
    preserveAspectRatio="xMinYMin"
  ></svg>


this.svg = d3.select("#bar-chart");
    document.querySelector("#bar-chart").innerHTML = "";


 //align the bar chart
      this.width =
        +this.svg.attr("width") - this.margin.left - this.margin.right;
      this.height =
        +this.svg.attr("height") - this.margin.top - this.margin.bottom;

      this.g = this.svg
        .append("g")

        .attr(
          "transform",
          "translate(" + this.margin.left + "," + this.margin.top + ")"
        );

  //Initialize Axis
      this.x = d3Scale
        .scaleBand()
        .rangeRound([0, this.width])
        .padding(0.85);

  this.x.domain(this.totalStores.map(d => d.store));
      this.y = d3Scale.scaleLinear().rangeRound([this.height, 0]);
      this.y.domain([0, d3Array.max(this.totalStores.map(d => d.storeCount))]);

//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");