在平移和缩放轴上调整矩形大小答案

【问题标题】：Resizing rectangle on Pan & Zoom Axes在平移和缩放轴上调整矩形大小
【发布时间】：2016-07-23 12:56:03
【问题描述】：

我在 Mike Bostock 的平移和缩放轴示例中添加了矩形，但我无法使用放大的轴调整矩形的大小。我已将删除和附加/输入添加到缩放功能，但它不执行。任何帮助将不胜感激。

gMain.selectAll(".rectband").remove();

        shape = gMain.selectAll('.rectband')
           .data(data)
           .enter()
           .append('rect')
           .attr("fill", "blue")
           .attr("width", 100)
           .attr("height", 100);

https://bl.ocks.org/mbostock/db6b4335bf1662b413e7968910104f0f

【问题讨论】：

您可能需要再次调用“缩放”。
如何访问缩放后的 x 和 y 坐标以进行更新？
d3 version 4 zoom behaviour on g element的可能重复

标签： d3.js

【解决方案1】：

在这个小提琴中使用了最终解决方案：

https://jsfiddle.net/u6rj20jc/3/

 function zoomed() {
        view.attr("transform", d3.event.transform);
        gX.call(xAxis.scale(d3.event.transform.rescaleX(x)));
        gY.call(yAxis.scale(d3.event.transform.rescaleY(y)));

        gMain.attr("transform", d3.event.transform);
        group.attr("transform", d3.event.transform);
       }

【讨论】：