javascript - SVG 在使用特定比例和位置初始化后返回到其默认比例和位置

Question

我正在尝试通过将其比例和位置设置为特定值来初始化 svg 并且它有效但是当用户尝试缩放或拖动 svg 时出现问题，它立即返回到其默认比例和位置，如您所见在这个JSFiddle Example (尝试缩放或拖动 svg 以查看问题)，如果有办法设置 d3.event.scale 和 d3.event.translate 属性，但似乎这些属性是只读的。这是我的代码:

var scale=0.5,translate=[25,800];

var svg = d3.select("svg");
var g = svg.select("g");

svg.attr("width", "100%")
   .attr("height", "100%")
   .attr('viewBox', '0 0 1200 1200').attr("preserveAspectRatio", "xMidYMid 
meet").call(d3.behavior.zoom().on("zoom", function() {
     g.attr("transform", "translate(" + translate + ")" + " scale(" + scale + 
     ")");
     scale = d3.event.scale;
     translate =  d3.event.translate;
 }));

 g.attr("transform", "translate(" + translate + ")" + " scale(" + scale + ")");

Answer 1

这个答案是指 d3.v3 版本，在 v4 中我们会使用 d3.zoomIdentity

您需要将translate 和scale 值传递给缩放函数，并且您还需要初始翻译g 元素

var g = svg.select("g")
           .attr("transform", "translate(" + translate + ")" + " scale(" + scale + ")")

相关片段

svg.attr("width", "100%")
    .attr("height", "100%")
    .attr('viewBox', '0 0 1200 1200').attr("preserveAspectRatio", "xMidYMid meet")
    .call(d3.behavior.zoom()
        .translate(translate)    // ADDED THIS
        .scale(scale)            // AND THIS
        .on("zoom", function () {
            scale = d3.event.scale;
            translate = d3.event.translate;
            g.attr("transform", "translate(" + translate + ")" + " scale(" + scale + ")");
        }));

Check out updated JSFiddle