Question

我已经陷入这个问题几天了，我希望有人可以帮助我。基本上这是问题所在：我有一张英国地图，带有城市标签和标记。我已经启用了缩放和平移，但是当我放大标记和标签的尺寸增长时。我想在缩放和平移期间保留标记poisiton（伦敦总是在它的位置），但不扩展标记和标签的尺寸。

这是我的缩放功能

var zoomBehav= function(){
      var t = d3.event.translate,
          s = d3.event.scale;
      t[0] = Math.min(width / 2 * (s - 1), Math.max(width / 2 * (1 - s), t[0]));
      t[1] = Math.min(height / 2 * (s - 1) + 230 * s, Math.max(height / 2 * (1 - s) - 230 * s, t[1]));
      zoom.translate(t);
      g.style("stroke-width", 1 / s).attr("transform", "translate(" + t + ") scale(" + s + ")");
    };

任何人都可以帮助我？

附加信息 我想我应该写更多信息。我的svg被定义为

this.svg = d3.select("#"+this.config.mapContainer).append("svg")    
              .attr("id","svgMap")
              .attr("width",width)
              .attr("height",height)
              .style("background-color", "lightblue")
              .append("g").attr('id','first_g')
              .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")")

        //Adding Zoom Rect to svg
        this.svg.append("rect")
                .attr("id", "d3e_zoomArea")
                .attr("class", "d3e_zoomArea")
                .attr("x", -width / 2)
                .attr("y", -height / 2)
                .attr("width", width)
                .attr("height", height)
                .attr('onmousedown', 'return false');

        //Insert g elementi in svg
        g = this.svg.append("g").attr('id','g_pathContainer');

        //Set Actual Map Right Projection
        / create a first guess for the projection
    subunits = topojson.feature(map, map.objects[level]);
    center = d3.geo.centroid(subunits);

    projection = d3.geo.mercator()
                .scale(width / 2 / Math.PI) //Crea la scala di visualizzazione
                .center(center) //Centra la posizione sulla mappa
                .translate([0, 0]);

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

    // using the path determine the bounds of the current map and use 
    // these to determine better values for the scale and translation             
    var bounds  = path.bounds(subunits);
    var hscale  = scale*width  / (bounds[1][0] - bounds[0][0]);
    var vscale  = scale*height / (bounds[1][1] - bounds[0][1]);
    scale   = (hscale < vscale) ? hscale : vscale;

    // new projection
    projection = d3.geo.mercator().center(center)
                       .scale(scale).translate([0, 0]);
    path = path.projection(projection);

        zoom = d3.behavior.zoom()
                    .translate(projection.translate())
                    .scale(projection.scale())
                    .scaleExtent([this.config.scaleRange.scaleMin , this.config.scaleRange.scaleMax])
                    .on("zoom", zoomed);
        d3.select("#first_g").call(zoom);

添加了JSFIDDLE 我创建了一个jsfiddle（http://jsfiddle.net/z9S7y/）来重现我的问题。我已经对基础投影应用了一些初始变换，以便相对于实际国家居中和缩放地图。

D3地图禁用城市标签上的缩放

0 个答案: