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