javascript D3.js 设置初始缩放级别
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16178366/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
D3.js Set initial zoom level
提问by Jakub Svec
I have several graphs set up to zoom on the container and it works great. However, on the initial load, the zoom level is way too close. Is there a method of setting the initial zoom level to avoid having to first zoom out? I am familiar with the .scale()method but have not had any luck implementing it. Is this the way to go or is there something I am missing?
我设置了几个图表来放大容器，效果很好。但是，在初始加载时，缩放级别太接近了。是否有设置初始缩放级别以避免必须先缩小的方法？我熟悉该.scale()方法，但没有任何运气实施它。这是要走的路还是我错过了什么？
Here is what I have thus far as pertaining to zoom:
以下是我迄今为止关于缩放的内容：
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');
采纳答案by Pudders
I finally got this to work by setting boththe initial transform and the zoom behavior to the same value.
我终于通过设置得到这个工作既初始转换和缩放行为相同的值。
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)");
回答by davcs86
D3v4 answer
D3v4 答案
If you are here looking for the same but with D3 v4,
如果您在这里寻找相同的但使用 D3 v4，
var zoom = d3.zoom().on("zoom", zooming);
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)");
回答by deweyredman
Adding this answer as an addendum to the accepted answer in case anyone is still having issues:
将此答案添加为已接受答案的附录，以防有人仍有问题：
The thing that made this really easy to understand was looking here
使这很容易理解的事情是看这里
That being said, I set three variables:
话虽如此，我设置了三个变量：
scale, zoomWidth and zoomHeight
缩放、缩放宽度和缩放高度
scale is the initial scale you want the zoom to be, and then
scale 是您希望缩放的初始比例，然后
zoomWidth and zoomHeight are defined as follows:
zoomWidth 和 zoomHeight 定义如下：
zoomWidth = (width-scale*width)/2
zoomHeight = (height-scale*height)/2
where width and height are the width and height of the "vis" svg element
其中 width 和 height 是“vis” svg 元素的宽度和高度
the translate above is then amended to be:
然后将上面的翻译修改为：
.attr("transform", "translate("+zoomWidth+","+zoomHeight+") scale("+scale+")")
as well as the zoom function:
以及缩放功能：
d3.behavior.zoom().translate([zoomWidth,zoomHeight]).scale(scale)
What this does is effectively ensures that your element is zoomed and centered when your visualization is loaded.
这样做可以有效地确保您的元素在加载可视化时缩放和居中。
Let me know if this helps you! Cheers.
如果这对您有帮助，请告诉我！干杯。
回答by hexnod
Applies to d3.js v4
适用于 d3.js v4
This is similar to davcs86's answer, but it reuses an initial transform and implements the zoom function.
这类似于davcs86's answer，但它重用了初始变换并实现了缩放功能。
// 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);
}
};
See it in action: jsbin link
看看它的实际效果：jsbin 链接
回答by Prasanna
I was using d3 with react and was very frustrated about the initial zoom not working.
我在反应中使用 d3 并且对初始缩放不起作用感到非常沮丧。
I tried the solutions here and none of them worked, what worked instead was using an initial scale factor and positions and then updating the zoom function on the basis of those scale factor and positions
我在这里尝试了解决方案，但都没有奏效，而是使用初始比例因子和位置，然后根据这些比例因子和位置更新缩放功能
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})`
);
The zoom function would look something like this
缩放功能看起来像这样
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})`);
})
);
If you noticed the getEvent()as a function, it was because importing event from d3-selectionwas not working in my case. So I had to do
如果您注意到getEvent()作为一个函数，那是因为d3-selection在我的情况下导入事件 from不起作用。所以我不得不做
const getEvent = () => require('d3-selection').event;
