SVG Zoom and Pan Javascript

Question

So, I found a code that zooms and pans in SVG, but since im just a novice I cant figure out what code to replace so that I can zoom and pan in my own SVG file.

var width = 960,
        height = 500;

var randomX = d3.random.normal(width / 2, 80),
        randomY = d3.random.normal(height / 2, 80);

var data = d3.range(2000).map(function() {
    return [
        randomX(),
        randomY()
    ];
});

var svg = d3.select("body").append("svg")
        .attr("width", width)
        .attr("height", height)
        .append("g")
        .call(d3.behavior.zoom().scaleExtent([1, 8]).on("zoom", zoom))
        .append("g");

svg.append("rect")
        .attr("class", "overlay")
        .attr("width", width)
        .attr("height", height);

svg.selectAll("circle")
        .data(data)
        .enter().append("circle")
        .attr("r", 2.5)
        .attr("transform", function(d) { return "translate(" + d + ")"; });

function zoom() {
    svg.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
}

I do realise that at first it creates a random svg with dots, so that code I obviously dont need, but where do I enter my own SVG filepath? Thanks in advance.

Answer 1

Find panzoom.min.js or SVGPAN.js

https://code.google.com/p/svgpan/downloads/list

Then just include the script call. "script xlink:href="SVGPan.js"

This will allow you to pan and scroll zoom.

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
<script xlink:href="SVGPan.js"/>
<g id="viewport" transform="translate(200,200)">
 <g style="fill: #ffffff; stroke:#000000; stroke-width:0.172">
    <g visibility="visible">
    <polygon stroke="Black" stroke-width=".1" fill="MediumTurquoise" points="543.964566929134,281.534776902887 537.240485564304,281.534776902887 537.240485564304,287.534776902887 543.964566929134,287.531167979003 " />
    <line stroke="MediumOrchid" stroke-width=".1" stroke-opacity="1" x1="473.240157480315" y1="293.472112860892" x2="473.240157480315" y2="291.972112860892" />
    </g>
 </g>
</g>
</svg>