2017-05-22 9 views
0

現在、特定のアプリケーションを作成するために、角度2、primeNGおよびD3を使用しています。角度2のD3ビジュアライゼーションの要素の高さ属性の取得

このアプリケーションでは、私はprimeNG dataTableとD3ビジュアライゼーションを並べて配置する必要があります。

HTML構造は、primeNGのui-gクラスが高さ調整を処理し、ui-g-XXクラスがブートストラップのグリッドシステムと同様に動作するようなものです。

<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.基本的に、高さが更新される前に、 "古い"高さ値(デフォルトのsvg高さ150px)で描画されています(赤いアウトラインは最終的なsvgサイズを示します)

Primengクラスは私のコードが高さの値を読み込んだ後にコンポーネントの高さを更新しているので、CSSを適用した後に高さを得ることができるかどうかを調べるために様々なAngularライフサイクルフックを使用しようとしました。そうしたものは見つからない。

私の質問は、コンポーネントの高さの値を読み取る前に、どの角度からビュー全体をレンダリングするのを待つことができるのでしょうか?あるいは、誰かがより良いアプローチを提案しているなら、私は大いに助けに感謝します。

私は単に同様の問題のためのタイムアウトを使用してい
+0

問題を示すためにプランナーを設定できますか?私はあなたが見ているレンダリングの問題が正確に何であるかはわかりません。 –

答えて

0

、私は、レンダリングするためにいくつかのD3要素を待つ彼らから属性を取得し、その後、トップ

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

上でより多くの要素をレンダリングする必要があるので、これは1.5秒を与えます次のレイヤーの前にレンダリングする最初のステージ。タイマー関数でラップされます。

編集:here's a link to some of the timeout info from jQuery...

+0

ちょうどこれを使って遊んで終わり、150ミリ秒まで時間を過ごすことができました...だから、1500は道だったけど、それは正しい方法で考えてくれました。 –

関連する問題