d3 強制有向グラフの角度ディレクティブを作成しました。
コードはこちら。
$log.log("xx"); を使用します。コードをデバッグします。何らかの理由で、このディレクティブが複数回ロードされることに気付きました。ディレクティブが結合する mg-controller には、2 つのファクトリがあり、これら 2 つのファクトリは、コントローラが初期化されるたびに呼び出されます。使用する$log.log("xx");ことで、pay が読み込まれるときに d3 ディレクティブが少なくとも 6 回読み込まれ、各ファクトリに対して 2 回、その後に 2 回読み込まれることがわかりました。私が「回避した」方法は使用していますd3.select("svg") .remove();私のページには重複するsvgがありません。しかし、これはパフォーマンスに大きく影響します。さらに、同じコントローラーの下の同じページにいくつかの衣装フィルターを追加しました。フィルターが実行されるたびに、d3 ディレクティブがリロードされることに気付きました。フィルターは、同じコントローラーの下にあることを除いて、d3 ディレクティブとは関係ありません (フィルターの実行時にコントローラーがリロードされるとは思いません)。
問題は私のlink: function側にあると思います。面倒に見えますが、実際には次の 2 つのことしか行いません。1) d3 にフィードされるデータを生成し、2) d3 を実行してグラフを生成します。
template:'<div>{{fdg()}}<div>',
link: function ( $scope, $element,attr){
...
$scope.fdg = function(){
$log.log("in function");
$scope.getLinks();
ForceDirectedGraph($scope.tags,$scope.links);
}
2 つの関数を に入れ$scope.fdg、 で呼び出しtemplate:'<div>{{fdg()}}<div>'ます。これはおそらく非常に悪い習慣ですが、関数を呼び出す他の方法を見つけることができませんでした。
これら2つの関数を呼び出そうとしました
$scope.getLinks();
ForceDirectedGraph($scope.tags,$scope.links);
このように直接link: function：
link: function ( $scope, $element,attr){
$log.log($scope.tags);
$log.log(tags);
$scope.getLinks();
ForceDirectedGraph($scope.tags,$scope.links);
奇妙なことに、$scope.tags空であり、「[]」と「タグ」は定義されていません。関数が<forcedirected-graph tags="tags" style="overflow: hidden;"></forcedirected-graph>
引数を取得できなかった理由を本当に理解できませんでした。そういうわけで$scope.fdg.function()...、ビューから渡された引数に到達できるように、これら 2 つの関数をラップするためにばかげて使用しています。
正常にロードされる他の (d3) ディレクティブがいくつかあります。異常な d3 ディレクティブのテンプレートをそれらの作業ディレクティブに一致させようとしましたが、失敗しました :( (ディレクティブ リンクで引数/スコープが実際にどのように機能するか混乱しています)。
Angular をより深く理解できるように、何が問題なのかを理解できれば素晴らしいと思います。角度は本当に素晴らしいです:)
前もって感謝します！