我一直在尝试将此代码升级到 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 https://jsfiddle.net/user1313/64L3s2fq/10/- 根据我的需要工作(语义缩放)。
新代码jsfiddle https://jsfiddle.net/user1313/tydfz2bj/12/- 仅用作几何缩放。
Mike Bostock 的 SVG 几何和语义缩放示例在 d3 v3 中对我有用,但由于 Zoom.x() 和 Zoom.y() 函数已被删除,我迷失了。