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

Question

我一直在尝试将此代码升级到 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) + ")";
}
}

旧代码jsfiddle - 根据我的需要工作(语义缩放)。 新代码jsfiddle - 仅用作几何缩放。

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

Answer 1

迈克博斯托克的 Pan & Zoom III可以修改示例以使用语义缩放，如下所示 jsfiddle 。重要的部分是:

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

zoomTransform是平面的线性变换，它随着距离的增加而增加面积。如果我们希望圆在缩放后具有相同的面积，我们需要通过变换的比例因子 transform.k 重新调整它们的半径。