angularjs 및 d3을 사용하는 Cartogram TypeError : undefined가 함수가 아닙니다.

Question

d3.js 및 angularJS를 사용하여 srilanka의 도형을 만듭니다. 나는 그것을 만드는 컨트롤러와 함수를 가지고있다.

<div ng-controller="CartoGramctrl" class="box-content" ng-init="createCartogram()">     
    <svg id="map"></svg> 
</div> 

app.JS : 그것은 TypeError: undefined is not a function

HTML을 말하는 오류를 반환 d3.cartogram를 들어

routerApp.controller('CartoGramctrl',function($scope) { 
    $scope.createCartogram = function() { 
    var color = d3.scale.category10(); 
    var map = d3.select("#map"); 
    var munics = map.append("g").attr("id","states").selectAll("path"); 
    var width = 1280 , height =620, centered; 
    var proj = d3.geo.albers() 
      .center([3, 8]) 
      .rotate([-80, 0]) 
      .scale(1900 *5) 
      .translate([width/2, height/2]); 
    var topology,geometrics,carto_features; 
    var vote_data = d3.map(); 
    var carto = d3.cartogram().projection(proj).properties(function (d){ 
    return d.properties; 
    }); 
    d3.csv("data/sri-lanka.csv", function (data) { 
      data.forEach(function (d) { 
       vote_data.set(d.DISTRICT, [d.POPULATION, d.COLOR]); 
      }) 
     }); 
    d3.json("data/sri-lanka.json",function (data){ 
    topology = data; 
    geometrics = topology.objects.states.geometrics; 
    var neighbors = topojson.neibhours(topology.objects.states.geometrics); 
    var features = carto.features(topology,geometrics), 
    path = d3.geo.path().projection(proj); 
    munics = munics.data(features).enter().append("path").attr("class","states").attr("id",function (d){ 
     return d.properties.name; 
    }).style("fill",function(d,i) { return color(d.color = d3.max(neighbors[i], function(n) { return features[n].color; }) + 1 | 0); }) 
    .attr("d",path); 
    munics.append("title").text(function (d){ 
     return d.properties.name; 
    }); 

}); 
}; 
}); 

Answer 1

이 작업을, 하나는 cartogram.js 및 topoJSON.js를 모두 포함 할 필요가있다.

cartogram.js은 D3 뒤에 포함되어야하고 코드가 실행되기 전에 topoJSON이 cartogram.js 앞에 있어야합니다.