首页 文章

获取角度为2的D3可视化元素的高度属性

提问于
浏览 次
0

我目前正在使用Angular 2，primeNG和D3来创建特定的应用程序 .

对于这个应用程序，我需要一个primeNG dataTable和D3可视化并排放置 .

HTML结构看起来像这样，primeNG的 ui-g 类处理高度调整， ui-g-XX 类的行为类似于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类正在更新组件高度，我尝试使用各种Angular生命周期钩子来查看是否可以找到一个允许我在应用css后得到高度的钩子但是我不能找到一个 .

所以我的问题是，有没有人知道如何在读取组件的高度值之前等待角度渲染整个视图？或者，如果有人有任何更好的建议方法，我将非常感谢你的帮助 .

angular d3.js primeng

1 回答

  • 0

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

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

    所以这给第一个阶段渲染1.5秒，在下一个图层之前，它包含在计时器功能中 .

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

    回复于

相关问题