Javascript 语义缩放和平移d3.js v4

我打算用d3.js v4实现语义缩放。关于Stackoverflow的大多数示例和问题都是针对v3的。所以我试着改变其中一个，就像这样。答案中的示例：

我试图熟练掌握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中的鼠标位置作为平移的偏移量，但没有成功

---

那么，缩放如何使用鼠标位置呢？获得更流畅的平移姿势也很好。

您可能会发现这个答案很有帮助。在应用缩放变换后，我通过重新缩放圆的半径来解决这个问题。你可能会发现这个答案很有用。在应用缩放变换后，我通过重新缩放圆的半径来解决这个问题。“在这里输入代码”？你应该在你的答案上多做点努力…@ThomasFlinkow-在这里添加了代码，这里是fiddle的链接：-谢谢“在这里输入代码”？你应该在你的答案上多加一点努力…@ThomasFlinkow-在这里添加了代码，这是到fiddle的链接：-谢谢

    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.[enter link description here][1]

        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: 

[1]: https://jsfiddle.net/sagarbhanu/5jLbLpac/3/