I'm new to d3js and trying to implement zoom and panning to a specific layer. While zooming the floorplan(attached image) the marker size also changes accordingly. Ideally the marker should change position with its fixed size based on panning or zoom level. I'm using below mentioned code. Any help is appreciated.
<!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>
