d3.js V4 缩放在计算缩放后跳转

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

对于我的简单示例，我有 2 个矩形，它们以初始过渡加载。(这大大简化了我的实际用例。

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

这个堆栈溢出问题很接近，但解决方案对我不起作用。在父 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>

它跳转的原因是因为你通过选择 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/

相关内容

最新更新

热门标签：