Javascript SVG在使用特定的比例和位置初始化后返回默认的比例和位置

我试图通过使用特定值设置svg的缩放和位置来初始化svg，但当用户尝试缩放或拖动svg时会出现问题，它会立即返回到默认的缩放和位置，如图所示（尝试缩放或拖动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 + ")");

---

这个答案是指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 + ")");
        }));