d3js缩放和平移排除标记

编程问答 2022-06-11

问题描述

我是d3js的新手，正在尝试将缩放和平移到特定图层。在缩放平面图（附加图像）时，标记大小也会相应更改。理想情况下，标记应根据平移或缩放级别以固定大小更改位置。我正在使用下面提到的代码。任何帮助表示赞赏。

<!DOCTYPE html>
<html lang="en">
<head>
    <Meta charset="UTF-8">
    <Meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="https://d3js.org/d3.v3.js"></script>
</head>
<body>
    <svg id="floorplan" style="width:420px;height:600px">
        <g id="maingraph">
            <g class="background-image">
                <image xlink:href="floorplan.jpg" x="0" y="0" width="420" height="600"></image>
            </g>
            <g class="marker-image">
                <image xlink:href="icon.png" x="310" y="380" width="40px" height="40px" ></image>
            </g>
        </g>
    </svg>
</body>
<script type="text/javascript">
    var svg = d3.select("#maingraph")
      .call(d3.behavior.zoom().on("zoom",function () {
        svg.attr("transform","translate(" + d3.event.translate + ")" + " scale(" + d3.event.scale + ")")
      }));
  </script>
</html>

Before Zoom

After Zoom,Marker should change position not size

Floorplan

Marker

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

panningsvgsvgsvgsvgpanzoomzoomzoom