如何准确缩放已经翻译的d3地图 [英] How to accurately zoom d3 maps which have already been translated

问题描述

我有一个地图，已经翻译，使其适合在画布上正确。

I have a map which has been translated to make it fit on the canvas properly.

我试图实现一种方式来缩放它，它的工作

I'm trying to implement a way to zoom it and it does work, but it moves away from center when you zoom in, rather than centering on the mouse or even the canvas.

这是我的代码：

function map(data, total_views) {
  var xy = d3.geo.mercator().scale(4350),
      path = d3.geo.path().projection(xy),
      transX = -320,
      transY = 648,
      init = true;

  var quantize = d3.scale.quantize()
    .domain([0, total_views*2/Object.keys(data).length])
    .range(d3.range(15).map(function(i) { return "map-colour-" + i; }));

  var map = d3.select("#map")
        .append("svg:g")
        .attr("id", "gb-regions")
        .attr("transform","translate("+transX+","+transY+")")
        .call(d3.behavior.zoom().on("zoom", redraw));

  d3.json(url_prefix + "map/regions.json", function(json) {
    d3.select("#regions")
        .selectAll("path")
            .data(json.features)
        .enter().append("svg:path")
            .attr("d", path)
            .attr("class", function(d) { return quantize(data[d.properties.fips]); });
  });

  function redraw() {
    var trans = d3.event.translate;
    var scale = d3.event.scale;

    if (init) {
      trans[0] += transX;
      trans[1] += transY;
      init = false;
    }
    console.log(trans);

    map.attr("transform", "translate(" + trans + ")" + " scale(" + scale + ")");
  }
}

我发现将初始翻译添加到新的翻译（ trans ）适用于第一次缩放，但对于所有后续缩放，它会更糟。任何想法？

I've found that adding the initial translation to the new translation (trans) works for the first zoom, but for all subsequent zooms it makes it worse. Any ideas?

推荐答案

这是一个全面的起点：

Here's a comprehensive starting-point: sematic zooming of force directed graph in d3

这个例子帮助了我特别（只是撕掉所有的小地图的东西，使它更简单）： http：// codepen .io / billdwhite / pen / lCAdi？editors = 001

And this example helped me specifically (just rip out all the minimap stuff to make it simpler): http://codepen.io/billdwhite/pen/lCAdi?editors=001

 var zoomHandler = function(newScale) {
        if (!zoomEnabled) { return; }
        if (d3.event) {
            scale = d3.event.scale;
        } else {
            scale = newScale;
        }
        if (dragEnabled) {
            var tbound = -height * scale,
                bbound = height  * scale,
                lbound = -width  * scale,
                rbound = width   * scale;
            // limit translation to thresholds
            translation = d3.event ? d3.event.translate : [0, 0];
            translation = [
                Math.max(Math.min(translation[0], rbound), lbound),
                Math.max(Math.min(translation[1], bbound), tbound)
            ];
        }

        d3.select(".panCanvas, .panCanvas .bg")
            .attr("transform", "translate(" + translation + ")" + " scale(" + scale + ")");

        minimap.scale(scale).render();
    }; // startoff zoomed in a bit to show pan/zoom rectangle

虽然我不得不调整该函数公平的位得到它工作为我的情况，但想法是有。这里是我的一部分。 （ E.range（min，max，value）仅限于 value 最小 / 最大。更改主要是因为我在这种情况下将0,0作为屏幕中心。

Though I had to tweak that function a fair bit to get it working for my case, but the idea is there. Here's part of mine. (E.range(min,max,value) just limits value to be within the min/max. The changes are mostly because I'm treating 0,0 as the center of the screen in this case.

// limit translation to thresholds
            var offw = width/2*scale;
            var offh = height/2*scale;
            var sw = width*scale/2 - zoomPadding;
            var sh = height*scale/2- zoomPadding;

            translate = d3.event ? d3.event.translate : [0, 0];
            translate = [
                E.range(-sw,(width+sw), translate[0]+offw),
                E.range(-sh,(height+sh), translate[1]+offh)
            ];
        }


        var ts = [translate[0], translate[1]];
        var msvg  = [scale, 0, 0, scale, ts[0], ts[1]];

这篇关于如何准确缩放已经翻译的d3地图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！