我设置了几个图表来放大容器,效果很好。然而,在初始加载时,缩放级别太接近了。有没有一种方法可以设置初始缩放级别以避免首先缩小?我熟悉
.scale()
方法,但没有成功实施它。这是要走的路还是我缺少什么?
这是我迄今为止有关缩放的内容:
var margin = {top: 20, right: 120, bottom: 20, left: 120},
width = 50000 - margin.right - margin.left,
height = 120000 - margin.top - margin.bottom;
var x = d3.scale.linear()
.domain([0, width])
.range([0, width]);
var y = d3.scale.linear()
.domain([0, height])
.range([height, 0]);
var tree = d3.layout.tree()
.size([height, width])
.separation(function(a, b) { return (a.parent == b.parent ? 1 : 2) / a.depth; });
var diagonal = d3.svg.diagonal()
.projection(function(d) { return [d.x, d.y]; });
function zoom(d) {
svg.attr("transform",
"translate(" + d3.event.translate + ")"+ " scale(" + d3.event.scale + ")");
}
var svg = d3.select("body").append("svg")
.attr("width", width + margin.right + margin.left)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")")
.attr("pointer-events", "all")
.call(d3.behavior.zoom()
.x(x)
.y(y)
.scaleExtent([0,8])
.on("zoom", zoom))
.append('g');
svg.append('rect')
.attr('width', width*5)
.attr('height', height)
.attr('border-radius', '20')
.attr('fill', 'sienna');
D3v4 答案
如果您在这里寻找相同的但使用 D3 v4,
var zoom = d3.zoom().on("zoom", function(){
svg.attr("transform", d3.event.transform);
});
vis = svg.append("svg:svg")
.attr("width", width)
.attr("height", height)
.call(zoom) // here
.call(zoom.transform, d3.zoomIdentity.translate(100, 50).scale(0.5))
.append("svg:g")
.attr("transform","translate(100,50) scale(.5,.5)");
我最终通过将初始变换和缩放行为设置为相同的值来实现此目的。
var zoom = d3.behavior.zoom().translate([100,50]).scale(.5);
vis = svg.append("svg:svg")
.attr("width", width)
.attr("height", height)
.call(zoom.on("zoom",zooming))
.append("svg:g")
.attr("transform","translate(100,50)scale(.5,.5)");
v4 这与
davcs86的答案类似,但它重用了初始变换并实现了缩放功能。
// Initial transform to apply
var transform = d3.zoomIdentity.translate(200, 0).scale(1);
var zoom = d3.zoom().on("zoom", handleZoom);
var svg = d3.select("body")
.append('svg')
.attr('width', 800)
.attr('height', 300)
.style("background", "red")
.call(zoom) // Adds zoom functionality
.call(zoom.transform, transform); // Calls/inits handleZoom
var zoomable = svg
.append("g")
.attr("class", "zoomable")
.attr("transform", transform); // Applies initial transform
var circles = zoomable.append('circle')
.attr("id", "circles")
.attr("cx", 100)
.attr("cy", 100)
.attr('r', 20);
function handleZoom(){
if (zoomable) {
zoomable.attr("transform", d3.event.transform);
}
};
查看实际效果:jsbin 链接
让这变得非常容易理解的是看
这里缩放、缩放宽度和缩放高度
scale 是您想要缩放的初始比例,然后
zoomWidth 和zoomHeight 定义如下:
zoomWidth = (width-scale*width)/2
zoomHeight = (height-scale*height)/2
其中宽度和高度是“vis”svg 元素的宽度和高度
上面的翻译修改为:
.attr("transform", "translate("+zoomWidth+","+zoomHeight+") scale("+scale+")")
还有缩放功能:
d3.behavior.zoom().translate([zoomWidth,zoomHeight]).scale(scale)
这样做的目的是有效确保加载可视化时元素能够缩放并居中。
如果这对您有帮助,请告诉我!干杯。
x
、
y
、scale
。const zoom = d3.zoom();
const svg = d3.select("#containerId")
.append("svg")
.attr("width", width)
.attr("height", height)
.call(zoom.transform, d3.zoomIdentity.translate(x, y).scale(scale)
.call(zoom.on('zoom', (event) => {
svg.attr('transform', event.transform);
}))
.append("g")
.attr('transform', `translate(${x}, ${y})scale(${k})`);
.call(zoom.transform, d3.zoomIdentity.translate(x, y).scale(scale)
确保当缩放事件被触发时,
event.transform
变量会考虑平移和缩放。紧随其后的一行处理缩放,而最后一行用于在“启动”时仅应用一次平移和缩放。我尝试了这里的解决方案,但没有一个有效,有效的是使用初始比例因子和位置,然后根据这些比例因子和位置更新缩放功能
const initialScale = 3;
const initialTranslate = [
width * (1 - initialScale) / 2,
height * (1 - initialScale) / 2,
];
const container = svg
.append('g')
.attr(
'transform',
`translate(${initialTranslate[0]}, ${initialTranslate[1]})scale(${initialScale})`
);
缩放功能看起来像这样
svg.call(
zoom().on('zoom', () => {
const transformation = getEvent().transform;
let {x, y, k} = transformation;
x += initialTranslate[0];
y += initialTranslate[1];
k *= initialScale;
container.attr('transform', `translate(${x}, ${y})scale(${k})`);
})
);
如果您注意到
getEvent()
作为一个函数,那是因为从
d3-selection
导入事件在我的情况下不起作用。所以我必须这么做const getEvent = () => require('d3-selection').event;
init_scale = [2, 8]
configInitialScaleZoom(container: any, init_scale: number[], zoom: any, options: any) {
if (!container) return;
const margin_left = options.margin.left;
const margin_top = options.margin.left;
const zoom_width = (margin_left * init_scale[0] - margin_left) * -1;
const zoom_height = (margin_top * init_scale[0] - margin_top) * -1;
container.call(zoom.transform, d3.zoomIdentity.translate(zoom_width, zoom_height).scale(init_scale[0]));
}