D3-负责地更改保证金大小

Question

我有一个演示here

这是Angular中的D3图表

x轴标签被一分为二，并且需要缠绕，因为它们可能很长。

我已经完成了这项工作，并且使用Mike Bostocks example

包装了标签

private insertLinebreak(this:SVGTextElement, text) {
    text.each(function() {
      let text = d3.select(this);
      let words = text.text().split(/\s+/).reverse();
      let word = "";
      let line = [];
      let lineNumber = 0;
      const lineHeight = 1.1;
      const y = text.attr("y");
      const dy = parseFloat(text.attr("dy"));
      let tspan = text.text(null).append("tspan").attr("x", 0).attr("y", y);
      //let tspan = text.text(null).append("tspan");
      while (word = words.pop()) {
        let width = d3.select('.bar-opacity').attr('width')
        line.push(word);
        tspan.text(line.join(" "));
        if (tspan.node().getComputedTextLength() > width) {
          line.pop();
          tspan.text(line.join(" "));
          line = [word];
          tspan = text.append("tspan")
                      .attr("x", 0)
                      .attr("y", y)
                      .attr("dy", ++lineNumber * lineHeight + dy + "px")
                      .text(word);
        }
      }

我现在的问题是，当屏幕较小时，标签可能会脱离svg。

是否可以负责地更改边距大小或svg高度，以允许更改标签的高度。