缩放和平移-将d3代码升级到d3.v4 [英] zooming and panning - upgrading d3 code to d3.v4

问题描述

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

I have been trying to upgrade this code to v4 of d3 with no luck.

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 -仅用作几何缩放.

Old code jsfiddle - works as i need it (semantic zoom). New code jsfiddle - only works as geometic zoom.

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

Mike Bostock's examples for SVG geometric and semantic zooming worked for me in d3 v3, but since the zoom.x() and zoom.y() functions had been removed, i am lost.

推荐答案

迈克·博斯托克(Mike Bostock)的潘&可以根据 jsfiddle 来修改Zoom III 示例以使用语义缩放.重要的位是:

Mike Bostock's Pan & Zoom III example can be modified to use semantic zooming as per this jsfiddle. The important bits are:

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重新缩放其半径.

zoomTransform is a linear transformation of the plane which increases area as it increases distances. If we want the circles to have the same area after zooming, we need to rescale their radii by the scale factor of the transformation, transform.k.

这篇关于缩放和平移-将d3代码升级到d3.v4的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！