Skip to content

Instantly share code, notes, and snippets.

@EfratVil
Last active September 16, 2017 07:32
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save EfratVil/f7527e9ee87dc61e8a74415fffaecc7c to your computer and use it in GitHub Desktop.
Simple Zoom and Pan
<!DOCTYPE html>
<meta charset="utf-8">
<svg width="960" height="500"></svg>
<script src="//d3js.org/d3.v4.min.js"></script>
<script>
var radius = 10;
var svg = d3.select("svg"),
width = +svg.attr("width"),
height = +svg.attr("height");
var circles = d3.range(100).map(function () {
return {
x: Math.round(Math.random() * (width - radius * 2) + radius),
y: Math.round(Math.random() * (height - radius * 2) + radius)
};
});
var color = d3.scaleOrdinal()
.range(['#0D6F7F', '#E07351', '#169E87', '#5D8222', '#97AF22', '#D2A825', '#DB5A33', '#DC5F5F', '#D86A87', '#CCCAC8']);
var container = svg.append("g");
container.selectAll("circle")
.data(circles)
.enter().append("circle")
.attr("cx", function (d) { return d.x; })
.attr("cy", function (d) { return d.y; })
.attr("r", radius)
.style("fill", function (d, i) { return color(i); });
svg.append("rect")
.attr("width", width)
.attr("height", height)
.style("fill", "none")
.style("pointer-events", "all")
.call(d3.zoom()
.scaleExtent([1 / 2, 4])
.on("zoom", zoomed));
function zoomed() {
container.attr("transform", d3.event.transform);
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment