<!DOCTYPE html>
<meta charset="utf-8">
<body>
<title>basemap -- no div</title>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
var imgHeight = 1025, imgWidth = 1538, // Image dimensions (don't change these)
width = 960, height = 500, // Dimensions of <svg>
clipX0 = 550, clipY0 = 440, // (x,y) of the clipped region
clipWidth = 500, clipHeight = 200; // Dimensions of clipped region
var svg = d3.select("body").append("svg")
.attr("width", width + "px")
.attr("height", height + "px");
// Define the SVG clipPath
var clip = svg.append("svg:defs").append("svg:clipPath")
.attr("id", "rectClip")
.append("svg:rect")
.attr("id", "rect1")
.attr("x", clipX0)
.attr("y", clipY0)
.attr("width", clipWidth)
.attr("height", clipHeight);
// Define the overlay that catches mouse events
svg.append("rect")
.attr("class", "overlay")
.style("fill", "none")
.style("pointer-events", "all")
.attr("width", width + "px")
.attr("height", height + "px");
// Use <g> to reset the origin and add pan & zoom behavior
var myImage = svg.append("g")
.attr("id","myImage")
.attr("transform","translate(" + (-clipX0) + "," + (-clipY0) + ")")
.call(d3.behavior.zoom().scaleExtent([1, 8]).on("zoom", zoom))
.append("image")
.attr("xlink:href", "Base.png")
.attr("x", 0)
.attr("y", 0)
.attr("width", imgWidth + "px")
.attr("height", imgHeight + "px")
.style("clip-path","url(#rectClip)");
function zoom() {
myImage.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
console.log("translate: " + d3.event.translate + ", scale: " + d3.event.scale);
}
</script>
</body>