Drag & Zoom II

This example shows how to combine d3-drag and d3-zoom to allow dragging of individual circles within a zoomable SVG. If you click and drag on the background, the view pans; if you click and drag on a circle, it moves.

This is quite a bit simpler than implementing drag-and-zoom with Canvas, since the SVG element automatically provides hit-testing, coordinate system transformation and re-rendering.

<!DOCTYPE html>
<meta charset="utf-8">
<svg width="960" height="500"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>

var svg = d3.select("svg"),
    width = +svg.attr("width"),
    height = +svg.attr("height"),
    transform = d3.zoomIdentity;;

var points = d3.range(2000).map(phyllotaxis(10));

var g = svg.append("g");

g.selectAll("circle")
    .data(points)
  .enter().append("circle")
    .attr("cx", function(d) { return d.x; })
    .attr("cy", function(d) { return d.y; })
    .attr("r", 2.5)
    .call(d3.drag()
        .on("drag", dragged));

svg.call(d3.zoom()
    .scaleExtent([1 / 2, 8])
    .on("zoom", zoomed));

function zoomed() {
  g.attr("transform", d3.event.transform);
}

function dragged(d) {
  d3.select(this).attr("cx", d.x = d3.event.x).attr("cy", d.y = d3.event.y);
}

</script>

https://d3js.org/d3.v4.min.js