Question

我希望能够在以编程方式在页面加载中居中并缩放它们之后平移和缩放SVG对象。（实际用例是放大到办公室的平面图。）

对于我的简单示例，我有两个加载初始转换的矩形。（这大大简化了我的实际用例。）

自动转换后，当用户尝试平移或缩放时 - 矩形会跳回到其初始位置。

This堆栈溢出问题已经关闭，但解决方案对我不起作用。在父SVG（#rectSVG）上调用d3.select似乎很接近，但是上边距和左边距现在是不正确的。

javascript文件：

var rectData = [
   { "x_axis": 10, "y_axis": 10, "color" : "green" },
   { "x_axis": 500, "y_axis": 10,  "color" : "purple"}
   ];

var svgContainer = d3.select("body").append("svg")
                                    .attr("width", 1800)
                                    .attr("height", 1200)
                                    .attr("id","rectSVG")
                                    .append("g")
                                    .attr("id","groupRect");

var rectangle = svgContainer.selectAll("rect")
                            .data(rectData)
                            .enter()
                            .append("rect")
                            .attr("x", function (d) { return d.x_axis; })
                            .attr("y", function (d) { return d.y_axis; })
                            .attr("fill",function (d) { return d.color; })
                            .attr("width", 200)
                            .attr("height", 100);

var centerScale = 1;
translate = [500, 500];

  d3.select("#groupRect").transition()
        .attr("transform", "translate("+translate+")scale(" + centerScale + ")")
        .duration(650);

var svgZoomMM =  d3.select("#rectSVG");

var _zoom = d3.zoom()
  .scaleExtent([1, 1000]) 
      .on("zoom", function() {  
    d3.select("#groupRect")    
    .attr("transform", d3.event.transform);
  });

  svgZoomMM.call(_zoom);

HTML文件：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
    <title>test</title>
</head>
<body>
  <script src="test.js"></script>
</body>
</html>

Answer 1

它跳转的原因是因为您已通过选择rectSVG并对其进行了手动转换。缩放转换事件（d3.event.transform）不知道反应已翻译（您可以通过检查d3.event.transform.x和d3.event.transform.y进行验证）。为了告诉缩放变换事件图形已被变换，您需要创建一个新的变换事件，例如 var t = d3.zoomIdentity.translate(500, 500).scale(1);并将其应用于可缩放的SVG svgZoomMM.transition().duration(650).call(_zoom.transform, t);

工作示例 https://jsfiddle.net/qj2r70wa/

d3.js V4变焦在计算出的变焦后跳跃

1 个答案: