S.O Response : Panning is not working properly with scatter plots

by Blake Dietz

JavaScript

// ********* START MY CODE

var width = 500;
var height = 500;
var margin = {top:0, right:0,bottom:0,left:0};

var data = d3.range(1,20).map(function(datum)
                              {

                                  var coordinates = {};
                                  coordinates.xcord   = datum;
                                  coordinates.ycord   = datum;
                                  return coordinates;
                              });

var xDomain = d3.extent(data.map(function(datum){ return datum.xcord}));
var yDomain = d3.extent(data.map(function(datum){ return datum.ycord}));

var x = d3.scale.linear().domain(xDomain).range([margin.left, width - margin.right]);
var y = d3.scale.linear().domain(yDomain).range([height - margin.bottom, margin.top]);

function zoom()
{
  svg.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
}
// ********* END MY CODE 


// ********* START YOUR CODE
var svg = d3.select("body").append("svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
            .call(d3.behavior.zoom().x(x).y(y).scaleExtent([1, 15]).on("zoom", zoom))
// MY MODIFICATION.
        .append("g")
          .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

    // Compute the scales’ domains.
    x.domain(d3.extent(data, function (d) { return d.xcord; })).nice();
    y.domain(d3.extent(data, function (d) { return d.ycord; })).nice();

    // Add the points!
    svg.selectAll("circle")
       .data(data)
       .enter()
       .append("circle")
       //.attr("fill","grey")
       .attr("cx", function (d) {
           return x(d.xcord);
       })
       .attr("cy", function (d) {
           return y(d.ycord);
       })

       .attr("r", 1);