D3 Geo.albers地图变形

Question

前一段时间，我创建了一个D3映射并将代码插入到Drupal页面中。它一直有效到最近。地图现在失真了，我看不到哪里出了问题。我尝试了最初必须做的宽度和高度的不同设置，但没有任何效果。地图的版本位于http://www.waremail.ca/test-map

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
<script src="/sites/default/d3_files/d3-provinces/topojson-v0.0.10.js"></script>
<script src="/sites/default/d3_files/d3-provinces/cartogram.js"> </script>
<style type="text/css">path.province {
    stroke: white;
  };
#map-container {};
</style>
<h1 class="rtecenter">Test D3 Geo.albers map</h1>

<div data-profile="/sites/default/d3_files/d3-provinces/prov_2014_emissions.csv" data-provinces="/sites/default/d3_files/d3-provinces/prov_4326_simple.topo.json" id="map-container">&nbsp;</div>
<script type="text/javascript">
   (function () {
    var colour, census, path, proj, data, s, p, width, height, margin, scale, heightTransform, widthTransform;

     if( screen.width <= 414 ) { // mobile devices
     width=360; widthTransform = 150;
     height=360; heightTransform = 180;
 } // end mobile
else
{ // desktop
     width=1020; widthTransform = 520;
     height=360; heightTransform = 180;
}
    container = d3.select("#map-container")
       .node();
     data = container.dataset;
        census = d3.map();
        scale;

    proj = d3.geo.albers()
      .translate([widthTransform, heightTransform])    // translate to center of screen
//    .scale([width])
; 
    path = d3.geo.path()
         .projection(proj);

    svg = d3.select(container)
            .append("svg")
            .attr("width", width)
            .attr("height", height);

    d3.json(data.provinces, function (canada) { // map of canadian provinces
        d3.csv(data.profile, function (profile) {
            profile.forEach(function (d) {
                census.set(d.Prov_Name, d);
            });

    var extent = d3.extent(profile, function (d) {
                  return +d.Total_MtCO2e; 
                  });

    scale = d3.scale.linear()
                .domain(extent)
                .range([0, 100]); // 100 OK
            ready(canada, profile);
        });
    });

     function ready(canada, profile) {
        var carto = d3.cartogram()
            .projection(proj)
            .properties(function (geom, topo) {
                return geom.properties;
            })
            // Morph on the number of the province's annual emissions
            .value(function (d) {
                var p = get_Total(d);
                    s = scale(p);
                return s;
            });

        var provinces = create_canada(canada);

        provinces
             .attr("transform", "translate(0,100)" + // was 500
                       "scale(1,1)");
       var features = carto(canada, canada.objects.provinces.geometries).features;
       provinces
            .data(features)
            .transition()
            .duration(2000)
            .ease("sin-in-out")
            .attr("d", carto.path);
    }
    function get_Total(d) {
      return +census.get(d.properties.PRENAME).Total_MtCO2e;
    }
    function create_canada(canada) {
        var provinces = svg.append("g")
            .attr("class", "provinces")
            .selectAll("path")
            .data(topojson.object(canada, canada.objects.provinces).geometries)
            .enter().append("path")
            .attr("class", "province")
            .attr("d", path)
            .style("fill", function(d) {
                return "#"+Math.floor(Math.random()*16777215).toString(16);
                }) 
            .style("opacity","0.7")
            .on("mouseover", function(d) {
                colour = d3.select(this).style("fill");
                d3.select(this).style("fill", "red");
             })
            .on("touchstart", function(d) {
                colour = d3.select(this).style("fill");
                d3.select(this)
                  .style("fill", "red"); 
             })
            .on("touchend", function(d) {
                  d3.select(this)
                    .style("fill", function(d) {
                  return colour}) // works
              })
            .on("mouseout", function(d) {
               d3.select(this).style("fill", function(d) {
                  return colour})
              });
      provinces.append("title")
            .html(function(d) {
                return (d.id + " "+ (get_Total(d))+ " tCO2/year");
                });
        return provinces;
}
}());
</script>