1

我正在处理带有 topojson 格式数据的 d3 地图。我可以绘制国家形状，缩放和窗格效果很好。

问题是当我尝试在地图上绘制城市时。我不知道如何用这些点管理缩放：点大小必须相同，但点必须正确平移。

这是一个示例，当我缩放地图时，这些点会从地图中平移出来：

    var width = 724;
var height = 768;
var objMap = null;

var x, y;

//Projection
projection = d3.geo.transverseMercator()
    .center([2.5, -38.5])
    .rotate([66, 0])
    .scale((height * 56.5) / 33)
    .translate([(width / 2), (height / 2)]);    

//Path
path = d3.geo.path()
    .projection(projection);

x = d3.scale.linear()
    .domain([0, width])
    .range([0, width]);

y = d3.scale.linear()
    .domain([0, height])
    .range([height, 0]);        

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

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

g = svg.append("g");        

// Zoom behavior
var zoom = d3.behavior.zoom()               
    .scaleExtent([1,15])
    .on("zoom",function() {     

        g.selectAll("path.zoomable").attr("transform","translate("+d3.event.translate.join(",")+")scale("+d3.event.scale+")")   
        g.selectAll(".place").attr("transform", function(d) { p = projection(d.geometry.coordinates); return "translate(" + x(p[0]) + "," + y(p[1]) + ")"; });                                      
    }
);
svg.call(zoom);

d3.json("datos/ARcompleto.json.txt", function (error, ar) {

    objMap = ar;

    //Draw the map
    provs = g.append("g")
    .attr("id", "g_provincias")
    .selectAll("path")
        .data(topojson.feature(ar, ar.objects.provincias).features)
        .enter().append("path")
        .classed("zoomable", true)
        .attr("d", path)            

    g.append("g")   
        .attr("id", "g_localidades")                                
        .selectAll("path")                                                              
        .data(topojson.feature(objMap, objMap.objects.localidades).features.filter(function (d) { return d.properties.LPROVINCIA == 'MENDOZA'; }))
            .enter().append("path")
            .attr("d", path)                                    
            .attr("class", "localidad")
            .classed("place", true)
            //.attr("transform", function(d) {return "translate(" + projection(d.geometry.coordinates.reverse()) + ")"; });

});
4

1 回答 1

0

我可以在 Lars 的帮助下管理它。这是新的缩放功能：

var zoom = d3.behavior.zoom()
    .translate(projection.translate())
    .scaleExtent([height, Infinity])
    .scale(projection.scale())
    .on("zoom", function() {
        projection.translate(d3.event.translate).scale(d3.event.scale)
        g.selectAll("path.zoomable").attr("d", path);

        projection.translate(d3.event.translate).scale(d3.event.scale)
        svg.selectAll(".place").attr("d", path);    

});

非常感谢！

于 2013-12-18T11:21:14.927 回答