微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

d3js缩放和平移排除标记

如何解决d3js缩放和平移排除标记

我是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 举报,一经查实,本站将立刻删除。