如何解决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>
After Zoom,Marker should change position not size
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。