用D3.js绘制地图：如何获得正确的scale（）和translate（）？

Question

我想画一张德国地区的地图。我的代码遵循d3vienno http://www.youtube.com/watch?v=lJgEx_yb4u0的youtube-tutorial。

当我打开页面时，它是空白的。当我检查代码时，svg和g元素就在那里。我已经知道我必须调整scale（）和translate（）。

所以我尝试了不同的值，并在stackoverflow上阅读了这个主题的帖子。

然而，没有任何效果。你能帮忙吗？

这是网站：http://test.schafott.net/hogn/bayern.html

var canvas = d3.select("body").append("svg")
.attr("width", 700)
.attr("height", 700)

d3.json("data/gemeinden_bayern.geojson", function(data) {


var group = canvas.selectAll("g")
    .data(data.features)  
    .enter()
    .append("g")

var projection = d3.geo.mercator().scale(7300).translate([0, 1980]); 

//path generator
var path = d3.geo.path().projection(projection); 

//append to path to each "g" element
var areas = group.append("path")
    .attr("d", path) //data comes from path generator
    .attr("class", "area") //CSS
    .attr("fill", "steelblue");

});

谢谢！

Answer 1

根据你的例子看看这个bl.ock，它没有像Lars所指出的那样使用代码集中。顺便说一句，你一定应该阅读这个问题和答案。