After creating an angular directive for a d3 forced-directed graph and using the code provided here, I encountered some issues with multiple loads. The directive seemed to load six times each time it was initialized, causing performance problems. To address this, I used d3.select("svg").remove(); to prevent duplicate svgs, but this affected the overall performance.
Additionally, when adding a custom filter under the same controller, the d3 directive would reload whenever the filter ran. This led me to believe that the problem lay within the link: function. Despite only performing two tasks in this function (generating data for d3 and creating the graph), the issue persisted.
template:'<div>{{fdg()}}<div>',
link: function ( $scope, $element,attr){
...
$scope.fdg = function(){
$log.log("in function");
$scope.getLinks();
ForceDirectedGraph($scope.tags,$scope.links);
}
I attempted to call the functions directly in the link: function but faced difficulties accessing the arguments passed from the view.
I tried:
$scope.getLinks();
ForceDirectedGraph($scope.tags,$scope.links);
However, 'tags' appeared as undefined and $scope.tags was empty ("[]"), despite passing 'tags' in the view as
<forcedirected-graph tags="tags" style="overflow: hidden;"></forcedirected-graph>$scope.fdg.function() seemed inefficient and I couldn't find a better solution.
While my other (d3) directives functioned normally, I struggled to understand how arguments/scope worked in the problematic directive's link. I tried aligning its template with working directives but without success.
For more comprehensive code examples, visit: here and here.
If anyone could help me identify and resolve these issues, I would greatly appreciate it. Understanding and mastering Angular is my ultimate goal!
Thank you in advance for any assistance!