Question

我尝试在d3.js（版本4）中使我的SVG可缩放。

您可以在此处查看我的尝试：JSFiddle

HTML

socketConnection = new Socket();
socketConnection.connect(new InetSocketAddress(server, port));

JS

public byte[] getLocalIP() {
        InetAddress localAddr = socketConnection.getLocalAddress();
        byte[] addressBytes = localAddr.getAddress();
        return addressBytes;
    }

事实上，所有这些似乎都有效，因为当我检查Google的代码检查器时，专注于我的SVG元素，我看到翻译和缩放的值随着我前进/后退鼠标滚动而改变。但实际的元素没有任何反应，这是非常奇怪的，因为我也试图通过普通的jQuery改变那些缩放/翻译值，SVG通过正确缩放来响应。

有人能指出我正确的方向完成这项任务吗？

记录中，这是d3.zoom()功能的官方文档。

Answer 1

您正在将属性转换应用于svg，这不是valid。在您的jquery示例中，您将样式转换应用于svg，这是有效的。通常的d3方法是将缩放区域包装在g中，并将属性变换应用于该区域。此外，您在翻译中缺少逗号：

d3.event.transform.x + " " + d3.event.transform.y //<-- there should be a comma in there

Answer 2

在g元素中添加一个id，并对其应用缩放而不是svg root

在现有SVG上应用缩放事件（d3.js v4）

2 个答案: