Question

我试图通过设置其特定值的比例和位置来初始化svg并且它可以工作但是当用户尝试缩放或拖动svg时会出现问题，它会立即返回到其默认比例和位置可以在此JSFiddle Example中看到（尝试缩放或拖动svg以查看问题），如果有办法设置 d3.event.scale 和 d3.event。翻译属性，但似乎这些属性是只读的。这是我的代码：

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

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

1 个答案: