相关疑难解决方法(0)

我正在尝试使用d3.geo和GeoJson将地图叠加到Google地图上.我已经设法迫使d3使用Google Map的投影来绘制路径,这非常简单.这是我到目前为止所拥有的:

http://www.caudillweb.com/temp/d3_choropleth.html

这在我放大和缩小时效果很好:

但是当我平移时,SVG覆盖也会移动,并且由于其大小是固定的,因此形状会被截断:

有没有人得到这样的东西工作？我可以从这里出发的任何想法？上面的示例是一个单独的HTML文件,如果有人想玩它.

我正在使用albersUSA投影来显示地图.我想为每个州添加州的名称.

这是我尝试过的,我可以在源代码中看到状态的名称,但我看不到它们的渲染.我究竟做错了什么？

var width = 1060,
height = 600,

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

svg.append("rect")
    .attr("class", "background")
    .attr("width", width)
    .attr("height", height)
    .on("click", click)
    .on("mousemove", mousemove);

var g = svg.append("g")
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")")
    .append("g")
    .attr("id", "states");

var projection = d3.geo.albersUsa()
    .scale(width)
    .translate([0, 100]);

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

draw();

function draw(){

  d3.json("readme.json", function(json) {
    g.selectAll("path")
    .data(json.features)
    .enter()
    .append("path")
    .attr("d", path)
    .append("svg:text")
    .text(function(d){
        return d.properties.name;
    })
    .attr("x", function(d){ …