在 angular 2 中获取用于 D3 可视化的元素的高度属性

Question

我目前正在使用 Angular 2、primeNG 和 D3 创建一个特定的应用程序。

对于这个应用程序，我需要并排放置一个 primeNG 数据表和一个 D3 可视化。

HTML 结构看起来像这样，primeNG 的 ui-g class 处理高度调整，ui-g-XX class 的行为类似于 bootstrap的网格系统。

<div class="ui-g">
    <p-dataTable class="ui-g-4">
        Columns...
    <p-dataTable>
    <svg class="ui-g-8"> 
        Visualistion...
    </svg>
</div>

到目前为止，我没有任何问题。在我的浏览器中，我可以看到 p-dataTable 和 svg 元素正确对齐。然而，d3 可视化没有正确呈现，as can be seen here. 基本上，在高度更新之前，可视化是使用 "old" 高度值（默认 svg 高度 150px）绘制的（红色轮廓显示最终svg 大小）

由于 primeng classes 在我的代码读取高度值后更新组件高度，我尝试使用各种 Angular 生命周期挂钩来查看是否可以找到一个允许我的在应用 css 后获得高度，但我找不到一个可以做到的。

所以我的问题是，有没有人知道如何在读取组件的高度值之前等待 angular 渲染整个视图？或者，如果有人有更好的方法建议，我将不胜感激。

Answer 1

我只是用超时来解决类似的问题，我需要等待一些 d3 元素呈现，从中获取属性，然后在顶部呈现更多元素

setTimeout(timer, 1500);
function timer(){... more d3.

所以这为第一阶段渲染提供了 1.5 秒的时间，在下一层之前，它包含在计时器函数中。

编辑：here's a link to some of the timeout info from jQuery...

在 angular 2 中获取用于 D3 可视化的元素的高度属性

Getting height attributes of an element for D3 visualisation in angular 2

angular

d3.js

primeng