我正在尝试使用 d3 进行缩放和平移。
我以here为例并将 svg 切换为常规 dom。
代码:
var section = d3.select("section"),
width = +section.attr("width"),
height = +section.attr("height");
var points = d3.range(2000).map(phyllotaxis(10));
var div = section.append("div");
div.selectAll("p")
.data(points)
.enter().append("p")
.attr("style", function(d) { return 'left: '+d[0]+'px; top: '+d[1]+'px;' })
.text('hi');
section.call(d3.zoom()
.scaleExtent([1 / 2, 4])
.on("zoom", zoomed));
function zoomed() {
div.attr("style", `transform: translate(${d3.event.transform.x}px, ${d3.event.transform.y}px) scale(${d3.event.transform.k})`);
div.attr("transform", d3.event.transform);
}
function phyllotaxis(radius) {
var theta = Math.PI * (3 - Math.sqrt(5));
return function(i) {
var r = radius * Math.sqrt(i), a = theta * i;
return [
960 / 2 + r * Math.cos(a),
500 / 2 + r * Math.sin(a)
];
};
}
这是一个codepen显示问题。
问题: 请注意,平移效果很好,但缩放中心点已关闭。它应该以鼠标所在的位置为中心进行放大。
最佳答案
假设您确实需要 <div>
和 <p>
s 而不是 <g>
和 <circle>
s;
您的翻译系数有点偏差。
改变你的
function zoomed() {
g.attr("style", `transform: translate(${d3.event.transform.x}px, ${d3.event.transform.y}px) scale(${d3.event.transform.k})`);
g.attr("transform", d3.event.transform);
}
至
function zoomed() {
g.attr("style", `transform: translate(${d3.event.transform.x-480}px, ${d3.event.transform.y}px) scale(${d3.event.transform.k})`);
g.attr("transform", d3.event.transform);
}
我认为会“解决”您的问题。
这是更新后的代码笔:http://codepen.io/anon/pen/bBoPVx
关于javascript - d3 DOM 中心点平移/缩放已关闭,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40870932/