使用 angularjs 和 d3 TypeError 的制图：未定义不是函数答案

【问题标题】：Cartogram using angularjs and d3 TypeError: undefined is not a function使用 angularjs 和 d3 TypeError 的制图：未定义不是函数
【发布时间】：2015-01-03 19:12:20
【问题描述】：

我正在使用 d3.js 和 angularJS 创建斯里兰卡地图。我有一个控制器和一个创建它的函数。它返回一个错误说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;
     });

});
};
});

【问题讨论】：

错误来自哪一行？
这一行 var carto = d3.cartogram().projection(proj).properties(function (d){ return d.properties;
你能创建一个可重现的例子吗？没有您的数据很难调试。
在您的页面上执行此代码之前，您是否包含了cartogram.js？ d3.cartogram 定义了吗？我认为您还必须包括topoJSON。是不是不见了？
@musically_ut 是的，缺少 topoJSON，现在它运行良好。谢谢

标签： javascript angularjs d3.js cartogram

【解决方案1】：

要使d3.cartogram 起作用，需要同时包含cartogram.js 和topoJSON.js。

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

【讨论】：