1

我是 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>

缩放前

缩放后,标记应该改变位置而不是大小

平面图

标记

4

0 回答 0