Angular D3：如何更改 svg 视口大小答案

【问题标题】：Angular D3: How to change the svg viewport sizeAngular D3：如何更改 svg 视口大小
【发布时间】：2020-06-05 09:17:58
【问题描述】：

这与反应能力无关。它是关于反应式图表的。

我实现了ngOnChanges 方法来随着数据源的变化更新图表：

ngOnChanges(changes: SimpleChanges) {
  if (changes.data) {
    this.createChart(changes.data.currentValue);
  }
}

它像魅力一样工作，除了...图表heigth 应该是动态的，我的意思是，根据changes.data.length 增长或缩小（更多数据，更多要渲染的行）。我不限制容器元素中的 svg 元素大小。

这就是我构建<svg> 根元素的方式：

const viewBoxHeight = data.length * 24 + 40;
const viewBoxWidth = 800;
if (this.svg) {
  this.svg.select('svg')
    .attr('viewBox', '0 0 ' + viewBoxWidth + ' ' + viewBoxHeight);
} else {
  this.svg = d3.select(this.hostElement)
    .append('svg')
    .attr('width', '100%')
    .attr('height', '100%')
    .attr('viewBox', '0 0 ' + viewBoxWidth + ' ' + viewBoxHeight);
}

如果this.svg 对象不存在，则创建它，否则，应该更改高度。

问题是它不工作，高度没有改变。我通过 Chrome 开发者工具手动更改了 html 代码中的属性viewBox，它改变了高度（有效）。

我错过了什么吗？

PS.：我在谷歌上搜索过这个问题，结果只是响应性问题

【问题讨论】：

您能否为您的问题创建一个 jsfiddle，这将非常有帮助。

标签： angular d3.js svg angular-reactive-forms

【解决方案1】：

深入研究我最终发现了问题：

    const.viewBoxHeight = data.length * 24 + 40;
    const viewBoxWidth = 800;
    if (this.svg) {
      d3.select(this.hostElement)
        .select('svg')
        .attr('viewBox', '0 0 ' + viewBoxWidth + ' ' + this.viewBoxHeight);
    } else {
      this.svg = d3.select(this.hostElement)
        .append('svg')
        .attr('width', '100%')
        .attr('height', '100%')
        .attr('viewBox', '0 0 ' + viewBoxWidth + ' ' + this.viewBoxHeight)

    }

它应该像我最初那样选择this.hostElement 而不是'svg'。

【讨论】：