D3.js的放大，缩小和平移功能：

D3.js的放大，缩小和平移功能：
d3的版本放上

"d3": "^7.0.0",

做这块功能的时候绞尽脑汁想了半天，觉得这块功能实现挺复杂的，在网上找了很多方式，结果由于d3版本的原因，好多没有生效，后来看了一晚上官方文档，以及别人的使用，最终给实现出来了

const svg = d3
        .select("#container5")
        .append("svg")
        .attr("id", "svg")
        .attr("width", 640)
        .attr("height", 480)
        .attr("viewBox", [0, 0, 640, 480]);
      svg
        .append("g")
        .attr("id", "image-g")
        .append("image")
        .attr("class", "control-img")
        .attr("height", this.height)
        .attr("width", this.width)
        .attr("href", imageUrl);


      svg.call(d3.zoom()
        .extent([[0, 0], [648, 480]])
        .scaleExtent([0.5, 100])
        .on("zoom", zoomed));


      function zoomed ({transform}) {
        let g = d3.selectAll('g')
        g.attr("transform", transform);
      }

（1）这串代码起的功能是平移作用，后边数字640和480是我的画布宽和高，意思是我的画布移动的可视范围是640✖️480，脱离这个区域，图片就看不见了

.attr("viewBox", [0, 0, 640, 480]);

（2）这串代码是来控制平移功能的

.extent([[0, 0], [648, 480]])

（3）这串代码是用来指定放大和缩小功能的范围

.scaleExtent([0.5, 100])

上述总结只是可以实现，具体的实现原理我还接触不深，有时间我会多看看文档，到时候有收获再更