D3-响应轴标签

Question

我有一个演示here

我有一个自适应D3图表，当调整窗口大小时，该图表会变窄。

我的问题是x轴标签可能会很长，并且在调整窗口大小时我需要它们变得更窄。

我正在尝试使用Mick Bostock中的示例，但是我的示例需要在调整窗口大小时做出响应。

private insertLinebreak(this:SVGTextElement, text) {
    text.each(function() {
      const text = d3.select(this);
      const 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).attr("dy", dy + "em");
      const width = this.x.rangeBand()
      while (word = words.pop()) {
        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 + "em").text(word);
        }
      }
    });

有关如何使它工作的任何帮助