使用 d3.js 在没有 geojson 或 topojson 的情况下平移和缩放自定义 svg 地图

编程问答 2022-05-16

问题描述

正如标题所描述的，我正在尝试对这个垃圾箱做同样的事情：https://jsbin.com/cewicolipo

但是我有一个来自 illustrator 的 SVG，而不是 topojson。我尝试了很多，但我无法让它正常工作。

我的尝试看起来像这样

 var width = 800,height = 800;

d3.xml('assets/world.svg',(data) => {

  d3
    .select("body")
    .node()
    .append(data.documentElement)
  
    
    let zoomStuff =  d3.select("#gElem")
    let svg2 = d3
      .select("#svgMap")
      .attr("width",width)
      .attr("height",height)
      .call(d3.zoom()
        .on("zoom",function () {
          console.warn('zoom');
          
          zoomStuff.attr("transform",d3.event.transform)
        })
        .scaleExtent([1,2])
        .translateExtent([[0,0],[width,height]])
      )
      .append("g")

P.S 我希望 SVG 容器是窗口的全宽和全高，并且用户也不能平移出边界

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

pansvgzooming