d3.js brush（）使用viewBox从svg父级继承了不正确的高度和宽度

我的根本问题是：是否有一种方法可以设置d3笔刷窗口大小，以便在使用viewBox时，它可以像其他SVG组件一样从其父级正确继承

详情： 我有两个链接的图表。第一个显示一组折线图，第二个是允许在主图表上缩放的基本图表。它看起来几乎与此示例完全相同：

我想将svg大小调整添加到图表中，以允许我的图表自动调整。对于我的大多数图表，这非常有效，但我的画笔窗口有一个问题。当我使用SVG viewbox而不是显式使用父级大小时，我的画笔区域被设置为整个SVG的一个小区域（在我的例子中，画笔窗口是300px 150px区域，而下面代码中的父级d3G实际上是1150*100）

以下是用于以正常工作方式初始化图表和笔刷窗口的代码片段：

  this.width = this.parentNativeElement.offsetWidth - this.margin.left - this.margin.right;
  this.height = this.parentNativeElement.offsetHeight - this.margin.top - this.margin.bottom;

          this.d3G = this.d3.select(this.parentNativeElement).append('svg')
//change in the next two attr lines
            .attr('width', this.parentNativeElement.offsetWidth)
            .attr('height', this.parentNativeElement.offsetHeight)
            .append<SVGElement>('g')
            .attr('transform', 'translate(' + this.margin.left + ',' + this.margin.top + ')');

     // ... some other initialization here (scale, domain, line drawing functions etc)

        this.d3G.append('g')
          .attr('class', 'brush')
          .call(this.d3.brushX().on('end',  () => this.brushed() )

我看过其他关于在Firefox上初始化区段的文章，但我没有设置区段，我在默认高度和宽度设置上有错误。这也发生在Chrome上，而不是firefox上

我对任何其他svg子集的默认高度和宽度设置没有任何问题，只有笔刷窗口

---

我还验证了我没有任何可以定义静态窗口大小的静态css设置。谷歌开发工具显示，该元素的高度和宽度也是自动/自动的。

这原来是一个相当小的修正。显然，笔刷不接受默认（来自父级）设置来初始化高度和宽度。如果我设置一个，然后使用另一个的100%，那么这就足够让画笔正确初始化了。下面是我用于配置调整大小的最终方法：

.attr('width', '100%')
.attr('height', this.parentNativeElement.offsetHeight)
.attr('viewBox', '0 0 ' + this.parentNativeElement.offsetWidth + ' ' + this.parentNativeElement.offsetHeight)
.attr('preserveAspectRatio', 'none')

这导致svg保持静态高度，仅在水平方向上缩放，但画笔没有任何问题

.attr('width', '100%')
.attr('height', this.parentNativeElement.offsetHeight)
.attr('viewBox', '0 0 ' + this.parentNativeElement.offsetWidth + ' ' + this.parentNativeElement.offsetHeight)
.attr('preserveAspectRatio', 'none')