AngularJS - huge directive - angularjs

Question

I have a website that has to display different set of data on a map. The map will always be the same - Some areas with 'onhover' effect and tooltip.
There is about 10 different sets of data.
I created a directive to display the map
Directive (only draw the map)
angular.module('PluvioradApp.controllers')
.directive('map', function() {
return {
restrict: 'E',
link: function(scope, element, attrs) {
var svg = d3.select(element[0])
.append("div")
.classed("svg-container", true) //container class to make it responsive
.append("svg")
//responsive SVG needs these 2 attributes and no width and height attr
.attr("preserveAspectRatio", "xMinYMin meet")
.attr("viewBox", "0 0 1000 500")
//class to make it responsive
.classed("svg-content-responsive", true);
var g = svg.append("g");
//Scale / translate / ...
var lineFunction = d3.svg.line()
.x(function(d) { return (d[0]+50000)/500; })
.y(function(d) { return (-d[1]+170000)/500; })
.interpolate("linear");
//Draw map
var path = g.selectAll('path')
.data(data.areas)
.enter().append("path")
.attr("d", function(d){ return lineFunction(d.borders)})
.attr("fill", "#D5708B")
.on('mouseover', function(d) {
d3.select(this).style('fill', 'orange');
d3.select(this).text(function(d){return "yeah";})
})
.on('mouseout', function(d) {
g.selectAll('path').style('fill', '#D5708B');
});
// zoom and pan
var zoom = d3.behavior.zoom()
.on("zoom", function() {
g.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
g.selectAll("path")
.attr("d", function(d){ return lineFunction(d.borders)});
});
svg.call(zoom);
}
}
});
My idea was to get the data to display from the controller (it comes from an API) and send it to the directive. Inside the above directive I will add a big switch or multiple if to display the correct data with the correct colors, size,...
I am sure that there is another way to split the work.
For example :
1st directive to display the map. It can be reuse multiple time
2nd directive to display set 1
3rd directive to display set 2
If this is the correct way, how can I achieve this ?
Additional information
I have a menu with a dropdown to select which data will be displayed. For the moment, the items redirect to a page containing the map directive above

Answer 1

Have a folder where you will have a bunch of service, where each service will be one of your data set.
Set1Service, Set2Service. etc.
Each of this will have own logic.
Have a factory service which will return one of your service.
for example:
(new FactoryService())->get('dataSetItem'); //this will return one of services from point 1.
Inject FactoryService in you directive use it.
In factory you will have the logic how to parse your data set, to determine what DataSetService you will have to return
This is extensible an easy to use.
All that I described are more related to Strategy and Factory pattern, you can read more about those and this will help you to have more abstract implementation.
angular.module('PluvioradApp.controllers')
.directive('map', function(factoryService) {
return {
restrict: 'E',
scope: {
dataSet: '='
}
link: function(scope, element, attrs) {
//all your code
var dataSetService = factoryService.get(scope.dataset);
var result = dataSetService.seed(d3);
}
}).service('factoryService', function() {
this.get = function(name) {
var service = null;
switch (name) {
case 'set1'
service = new DataSet1();
break;
case 'set2'
service = new DataSet2();
break;
}
return service;
}
});
function DataSet1() {
}
DataSet1.prototype.seed = function(d3) {
//d3 logic you have access here;
}
function DataSet2() {
}
DataSet2.prototype.seed = function(d3) {
//d3 logic you have access here;
}