Javascript D3.js缩放+平移怪异行为_Javascript_D3.js_Zooming_Pan

Javascript D3.js缩放+平移怪异行为

javascript d3.js

Javascript D3.js缩放+平移怪异行为,javascript,d3.js,zooming,pan,Javascript,D3.js,Zooming,Pan,尝试按中所述的方式使用缩放和平移。我有以下代码： <!DOCTYPE html> <html lang="en"> <head> <script src="https://d3js.org/d3.v5.min.js"></script> </head> <body> <div class="tree"> <svg class="tree__svg" width

尝试按中所述的方式使用缩放和平移。我有以下代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <script src="https://d3js.org/d3.v5.min.js"></script>
</head>

<body>
    <div class="tree">
        <svg class="tree__svg" width="900" height="900"></svg>
    </div>
    <script type="text/javascript">
        const data = {
            "name": "node #1",
            "children": [
                {
                    "name": "node #2",
                    "children": [
                        {
                            "name": "node #4",
                        },
                        {
                            "name": "node #5"
                        }
                    ]
                },
                {
                    "name": "node #3",
                    "children": [
                        {
                            "name": "node #6",
                        },
                        {
                            "name": "node #7"
                        }
                    ]
                }
            ]
        }

        const svg = d3.select(".tree__svg")
            .call(d3.zoom().on("zoom", () =>
                svg.attr("transform", d3.event.transform)));

        const hierarchy = d3.hierarchy(data);

        const tree = d3.tree().size([+svg.attr("width"), +svg.attr("height")])(hierarchy);

        svg.append("g")
            .selectAll("path")
            .data(tree.links())
            .join("path")
            .attr("fill", "none")
            .attr("stroke", "#000")
            .attr("d", d3.linkVertical()
                .x(d => d.x)
                .y(d => d.y));
    </script>
</body>

</html>

当我缩小并尝试平移SVG时，它会在视口外快速移动。即使没有之前的缩小平移行为，图像在平移时也会有小的跳跃

我记录了d3.event.transform的值，看起来x和y的值以某种方式上下跳跃。下面的屏幕截图显示了当我水平平移时发生的情况，因此只有x值在跳跃，但事实上，奇怪的是y值根本没有改变。我平稳地移动鼠标，因此我希望x和y的值也能平稳地增加或减少。知道是什么导致了这种行为吗

iirc，应用转换的元素应该与调用d3.zoom时d3附加侦听器的元素不同。尝试更改svg.attrtransform。。。到svg。选择“g”。这很有帮助。谢谢！如果您将您的评论作为答案写入我接受它。iirc，那么您应用转换的元素应该与调用d3.zoom时d3附加侦听器的元素不同。尝试更改svg.attrtransform。。。到svg。选择“g”。这很有帮助。谢谢！如果你写评论作为回答，我接受。