Javascript 缩放和平移-将d3代码升级到d3.v4

我一直在尝试将此代码升级到d3的v4，但没有成功

function xnr(selector) {
var coordinates = [
                        {"id": 1, "x": 120.16353869437225, "y": 160.974180892502466},
            {"id": 2, "x": 190.285414932883366, "y": 259.116836781737214},
            {"id": 3, "x": 310.218762385111142, "y": 170.033297729284202}
            ];

var x = d3.scale.linear()
    .domain([0, 100])
    .range([0, 100]);

var y = d3.scale.linear()
    .domain([0, 100])
    .range([0, 100]);

var xAxis = d3.svg.axis()
        .scale(x)
        .orient("bottom");

var yAxis = d3.svg.axis()
        .scale(y)
        .orient("left");

var svg = d3.select(selector).append("svg:svg")
    .attr("width", 400)
    .attr("height", 400)
    .call(d3.behavior.zoom().x(x).y(y).scaleExtent([1, 100]).on("zoom", zoom));

var groups = svg.selectAll("g.leaf")
    .data(coordinates)
    .enter()
    .append("svg:g")
    .attr("class", "leaf")
    .attr("transform", transform)
    .append("svg:circle")
    .attr("r", 5)
    .attr('stroke', '#aaaaaa')
    .attr('stroke-width', '2px');

function zoom() {
    svg.selectAll("g.leaf").attr("transform", transform);
}

function transform(d) {
    return "translate(" + x(d.x) + "," + y(d.y) + ")";
}
}

旧代码-根据需要工作（语义缩放）。 新代码-仅用作几何缩放

Mike Bostock的SVG几何和语义缩放示例在d3 v3中对我很有用，但由于zoom.x（）和zoom.y（）函数已被删除，我丢失了。

Mike Bostock的示例可以修改为使用语义缩放。重要的是：

var radius = 3;
var circles = g.selectAll("circle")
    .data(points)
  .enter().append("circle")
    .attr("cx", function(d) { return d[0]; })
    .attr("cy", function(d) { return d[1]; })
    .attr("r", radius);

svg.append("rect")
    .attr("width", width)
    .attr("height", height)
    .style("fill", "none")
    .style("pointer-events", "all")
    .call(d3.zoom()
        .scaleExtent([1 / 2, 4])
        .on("zoom", zoomed));

function zoomed() {
    var transform = d3.zoomTransform(this);
    circles.attr("transform", transform);
    circles.attr("r", radius/transform.k)
}

---

是平面的线性变换，其面积随着距离的增加而增加。如果我们想让圆在缩放后具有相同的面积，我们需要通过变换的比例因子，

transform.k

重新缩放它们的半径。看起来两个版本都有语义缩放功能。在我的浏览器中，使用第二个JSFIDLE，当使用chrome进行缩放时，圆点会变大，并且它们的大小保持不变。如何准确缩放？鼠标上下滚动。也使用铬。在这里，它是否像您预期的那样工作？：点本身是否变大？这里的链接用于几何，点在缩放时改变大小。

    I have an example fiddle for semantic zoom for d3 version 4 with click controls. also displaying scale for the reference. you can use this scale to add any semantic information for the same.

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(200).map(function() {
    return [randomX(), randomY()];
  });
var scale;

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;
}


// semantic zoom

function semanticZoom() {
  circle.attr("transform", transform(d3.event.transform));
}

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);
  });

    below is the js fiddle link:

    https://jsfiddle.net/sagarbhanu/5jLbLpac/36/