semantic zoom and panning d3.js v4

Question

I'm tying to implement semantic zoom with d3.js v4. Most examples and questions on Stackoverflow are for v3. So i tried to alter one of them, like from this answer. Example from the answer: bl.ocks.org example

I tried to adept the example for d3 v4:

var xOld, yOld;

var width = document.querySelector('body').clientWidth,
    height = document.querySelector('body').clientHeight;

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

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

var xScale = d3.scaleLinear()
    .domain(d3.extent(data, function (d) {
      return d[0];
    }))
    .range([0, width]);

var yScale = d3.scaleLinear()
    .domain(d3.extent(data, function (d) {
      return d[1];
    }))
    .range([0, height]);

var xExtent = xScale.domain();
var yExtent = yScale.domain();

var zoomer = d3.zoom().scaleExtent([1, 8]).on("zoom", zoom);

var svg0 = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)

    var svg = svg0.append('g') 
    .attr("width", width)
    .attr("height", height)




var circle = svg.selectAll("circle")
    .data(data)
  .enter().append("circle")
    .attr("r", 2.5)
    .attr("transform", transform_);


    svg0
    .call(zoomer)
    .call(zoomer.transform, d3.zoomIdentity);

function zoom(e) {

    var transform = d3.zoomTransform(this);

    var x = 0;
    var y = 0;
    if(d3.event.sourceEvent) {

      var x = d3.event.sourceEvent.layerX;
      var y = d3.event.sourceEvent.layerY;

    }
    var scale =  Math.pow(transform.k, .8);

    xScale = d3.scaleLinear()
                .domain([xExtent[0], xExtent[1] / scale])
                .range([0, width]);
    yScale = d3.scaleLinear()
                .domain([yExtent[0], yExtent[1] / scale])
                .range([0, height]);

    circle.attr('transform', transform_)
    svg.attr("transform", "translate(" + d3.event.transform.x + "," + d3.event.transform.y + ")");
}

function transform_(d) {
  var x = xScale(d[0]);
  var y = yScale(d[1]);

  return "translate(" + x + "," + y  + ")";
}

The zoom itself works - basically. Like the normal zoom it should zoom to the position of the mouse pointer, which it doesn't. Also the panning looks a little bit unsmooth.

I tried to use the mouse position from the d3.event.sourceEvent as offset for the translation, but it didn't work.

So, how could the zoom use the mouse position? It would be also great to get smoother panning gesture.

Answer 1

The zoom on mouse pointer can be added using pointer-events attribute.

Also, I have an example for a semantic zoom for d3 version 4 with the mouse pointer and click controls and also displaying the scale value for reference.

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

var randomX = d3.randomNormal(width / 2, 80),
  randomY = d3.randomNormal(height / 2, 80),
  data = d3.range(20).map(function() {
    return [randomX(), randomY()];
  });
var scale;
console.log(data);
var circle;

var _zoom = d3.zoom()
  .scaleExtent([1, 8])
  .on("zoom", zoom);

circle = svg.selectAll("circle")
  .data(data)
  .enter().append("circle")
  .attr("r", 5)
  .attr("transform", transform(d3.zoomIdentity));

svg.append("rect")
  .attr("fill", "none")
  .attr("pointer-events", "all")
  .attr("width", width)
  .attr("height", height)
  .call(_zoom);

function zoom() {
  circle.attr("transform", transform(d3.event.transform));
  scale = d3.event.transform.k;
  console.log(scale);
  document.getElementById('scale').value = scale;
}

function transform(t) {
  return function(d) {
    return "translate(" + t.apply(d) + ")";
  }
}
 
var gui = d3.select("#gui");
gui.append("span")
  .classed("zoom-in", true)
  .text("+")
  .on("click", function() {
    _zoom.scaleBy(circle, 1.2);
  });
gui.append("span")
  .classed("zoom-out", true)
  .text("-")
  .on("click", function() {
    _zoom.scaleBy(circle, 0.8);
  });    
    

Please find the link to fiddle here.