我正在尝试用d3.js v4实现语义缩放。大多数关于Stackoverflow的例子和问题都是针对v3的。所以我试着改变其中一个，比如answer。答案中的例子：bl.ocks.org example
我试着熟悉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  + ")";
}

缩放本身基本上是工作的。像正常的缩放一样，它应该缩放到鼠标指针的位置，但它没有。而且平移看起来有点不平滑。
我尝试使用d3.event.sourceEvent中的鼠标位置作为翻译的偏移量，但它不起作用。
那么，缩放如何使用鼠标位置呢？如果能获得更平滑的平移手势也会很棒。