angularjs - Angular directive for D3 datamap rendering only once -
so, made angular directive renders d3 datamap in html template. pass data directive via 'data' attribute. problem facing map displays when page loaded first time. however, when come template navigating other templates (routing done through 'ui-route'), map doesn't rendered , there no error in console either. here's directive:
app.directive('stabilitymap', function() { var containerid = document.getelementbyid('world-map-container'); var margin = 20, padding = 50, width = containerid.offsetwidth - margin; height = containerid.offsetheight - margin; return { restrict: 'a', scope: { data: '=', }, link : function(scope, element, attrs) { scope.$watch('data', function(newval, oldval) { var colorscale = d3.scale.linear().domain([50, 100]).range(['#ff0000', '#280000']); var fills = {defaultfill: '#ddd'}; var data = {}; var countries = datamap.prototype.worldtopo.objects.world.geometries; for(var = 0; < newval.length; i++) { (var j = 0; j < countries.length; j++) { if(countries[j].properties.name == newval[i].country) { fills[countries[j].id] = colorscale(newval[i]['stability index']); data[countries[j].id] = { fillkey : countries[j].id}; } } } var map = new datamap({ element: containerid, responsive: true, projection: 'mercator', setprojection: function(element) { var projection = d3.geo.mercator() .center([0, padding]) .scale(105) .translate([element.offsetwidth / 2, element.offsetheight / 2 - 70]); var path = d3.geo.path() .projection(projection); return {path: path, projection: projection}; }, fills: fills, data: data }) d3.select(window).on('resize', function() { map.resize(); }); }) } } })
here's angular controller template:
app.controller('countryctrl', ['$scope', '$http', function($scope, $http) { $scope.countriesdata = [ {'country': 'australia', 'stability index':'85'}, {'country':'united states of america', 'stability index':'90'}, {'country':'russia', 'stability index':'70'}, {'country':'india', 'stability index':'84.2'}, {'country':'china', 'stability index':'50'} ] }]);
here's html template:
<div class="row" id="world-map"> <div stability-map data="countriesdata" id="world-map-container"> </div> </div>
here screenshot when page loaded first:
and empty container after come page after navigating other template of website.
any idea what's happening?
the map doesnt rendered again, because function run once, when code first executed. suggest wrap creation of map inside function , call function every time load page (from controller).
$scope.rendermap = function() { var map = new datamap({ element: containerid, responsive: true, projection: 'mercator', setprojection: function(element) { var projection = d3.geo.mercator() .center([0, padding]) .scale(105) .translate([element.offsetwidth / 2, element.offsetheight / 2 - 70]); var path = d3.geo.path() .projection(projection); return {path: path, projection: projection}; }, fills: fills, data: data }) }
the code need render map following:
$scope.rendermap()
i hope helps.
xoxo
Comments
Post a Comment