Cartogram using angularjs and d3 TypeError: undefined is not a function

Question

我正在使用 d3.js 和 angularJS 创建斯里兰卡地图。我有一个控制器和一个创建它的函数。它 returns 一个错误说 TypeError: undefined is not a function

HTML:

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

app.JS:

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

要使 d3.cartogram 正常工作，需要同时包含 cartogram.js and topoJSON.js。

cartogram.js 必须包含在 D3 之后，但在您的代码之前运行并且 topoJSON 应该包含在 cartogram.js 之前。

Cartogram using angularjs and d3 TypeError: undefined is not a function

Cartogram using angularjs and d3 TypeError: undefined is not a function

javascript

d3.js

angularjs

cartogram