如何通过D3获取SVG与GeoJSON地图的缩放级别并打印到控制台

咱们直接针对你的需求来修改代码——要实现滚动任意地图时打印缩放级别，得分别处理SVG草图地图和GeoJSON度量地图的缩放事件，因为它们用了不同版本的D3 Zoom API（一个是v3的d3.behavior.zoom，一个是v4+的d3.zoom）。

1. 处理SVG草图地图的缩放级别 #

在你的sketchMapZoomed函数里，直接通过d3.event.scale拿到当前缩放级别，然后打印到控制台就行：

function sketchMapZoomed() {
  svg.selectAll("*").attr("transform", "translate(" + d3.event.translate + ")" + " scale(" + d3.event.scale + ")")
  // 新增：打印草图地图的缩放级别
  console.log("Sketch Map Zoom Level:", d3.event.scale);
}

2. 处理GeoJSON度量地图的缩放级别 #

对于v4+版本的d3.zoom，缩放级别存在d3.event.transform.k属性里，修改metricMapZoomed函数：

function metricMapZoomed () {
  svg.attr("transform", d3.event.transform)
  // 新增：打印度量地图的缩放级别
  console.log("Metric Map Zoom Level:", d3.event.transform.k);
}

完整修改后的关键代码片段 #

SVG草图地图部分 #

d3.xml("img/sketch_all_in_components_web.svg").mimeType("image/svg+xml").get(function(error, xml) {
  if (error) throw error;
  function sketchMapZoomed() {
    svg.selectAll("*").attr("transform", "translate(" + d3.event.translate + ")" + " scale(" + d3.event.scale + ")")
    // 打印草图地图缩放级别
    console.log("Sketch Map Zoom Level:", d3.event.scale);
  }
  document.getElementById('sketch4').appendChild(xml.documentElement);
  d3.select('#sketch4').selectAll('g, path').on('mouseenter',animateMapTargets).on('mouseleave',removeFilter);
  var svg = d3.select("svg")
    .call(d3.behavior.zoom().on("zoom", sketchMapZoomed ))
});

GeoJSON度量地图部分 #

function metricMapZoomed () {
  svg.attr("transform", d3.event.transform)
  // 打印度量地图缩放级别
  console.log("Metric Map Zoom Level:", d3.event.transform.k);
}
var svg = d3.select("#metric4").append("svg")
  .attr("width", width)
  .attr("height", height)
  .attr("id", "metricmap")
  .call(d3.zoom().on("zoom", metricMapZoomed ))
  .append("g");

额外小提醒 #

你的代码同时引入了v3和v4版本的D3库，这很容易导致API冲突。建议统一使用一个版本（比如v4+），并把草图地图的Zoom代码改成v4的写法，避免后续出现奇怪的问题：

// 统一v4+后的草图地图Zoom代码
function sketchMapZoomed() {
  svg.selectAll("*").attr("transform", d3.event.transform)
  console.log("Sketch Map Zoom Level:", d3.event.transform.k);
}
var svg = d3.select("svg")
  .call(d3.zoom().on("zoom", sketchMapZoomed ))

这样修改后，滚动任意一个地图时，控制台就会实时输出对应的缩放级别啦！

内容的提问来源于stack exchange，提问作者Salman