设置初始 D3 转换属性

Question

我创建了一张华盛顿地图 D.C。通过将 shapefile 转换为 JSON，然后映射它来创建道路。我已经设置了一个缩放属性以允许用户放大和缩小。在这里：

https://bl.ocks.org/KingOfCramers/raw/c8d575fb1322590012323a7953908d5f/56bd68ec204046076114413ef777706726bdb50a/

但是，我遇到了问题，因为当用户 "zooms" 进入投影地图时，它会跳回屏幕中间。这一定与缩放事件最初接收到的坐标有关。如何更改这些设置，以便在交互时地图从其当前位置开始缩放？

完整代码如下：

var transLat = -100;
var transLon = -350;
var transScale = 1.6;
var width = 960;
var height = 600;
var margin = {top: 0, bottom: 0, left: 0, right: 0}

d3.queue()
    .defer(d3.json, "simpleroads.json")
        .defer(d3.csv, "locations.csv")
    .await(ready)

function ready(error, world, locations) {
  var projection = d3.geoIdentity().reflectY(true).fitSize([width,height],world)
  var path = d3.geoPath().projection(projection) // Geopath generator
  var zoomExtent = d3.zoom().scaleExtent([1.6, 3]);

  function zoom() {
    g.attr("transform", d3.event.transform)
  }

  console.log(locations)

  var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.bottom + margin.top)
    .style("background-color","lightgrey")
    .call(zoomExtent
        .on("zoom", zoom))

  var g = svg.append("g")
      .attr("class", "mapInformation")
        .attr("transform", `translate(${transLat},${transLon}) scale(${transScale})`)
  var paths = g.selectAll("path")
      .data(world.features)
      .enter()
      .append("path")
      .attr("d", path)

}

Answer 1

您必须将初始变换传递给缩放函数。你的情况：

.call(zoomExtent.transform, 
    d3.zoomIdentity.translate(transLat, transLon).scale(transScale));

这是更新后的积木生成器：http://blockbuilder.org/anonymous/b1d7dcc08c3fbee934fd415d7127dd14

设置初始 D3 转换属性

Setting Initial D3 Transform Properties

javascript

transform

mouseevent

geojson

d3.js