设置初始 D3 变换属性答案

【问题标题】：Setting Initial D3 Transform Properties设置初始 D3 变换属性
【发布时间】：2018-01-19 19:59:37
【问题描述】：

我通过将 shapefile 转换为 JSON，然后对其进行映射，创建了华盛顿特区道路地图。我已经设置了一个缩放属性来允许用户放大和缩小。在这里：

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

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

这是完整的代码：

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)

}

【问题讨论】：

标签： javascript d3.js mouseevent transform geojson

【解决方案1】：

您必须将初始变换传递给缩放功能。在你的情况下：

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

这里是更新的块构建器：http://blockbuilder.org/anonymous/b1d7dcc08c3fbee934fd415d7127dd14

【讨论】：