У меня есть несколько графиков, предназначенных для увеличения масштаба контейнера, и он отлично работает. Однако при начальной загрузке уровень масштабирования слишком близко. Есть ли способ установки начального уровня масштабирования, чтобы избежать необходимости сначала уменьшать масштаб? Я знаком с методом .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');
Я, наконец, получил это для работы, установив как начальное преобразование, так и поведение масштабирования на одно и то же значение.
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)");
Ответ D3v4
Если вы ищете то же самое, но с 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)");
Добавление этого ответа в качестве дополнения к принятому ответу в случае, если у кого-то все еще есть проблемы:
То, что сделало это очень легким для понимания, выглядело здесь
При этом я устанавливаю три переменные:
масштаб, zoomWidth и zoomHeight
Шкала- это начальная шкала, на которую вы хотите масштабировать, а затем
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)
Это эффективно гарантирует, что ваш элемент будет увеличен и центрирован при загрузке вашей визуализации.
Сообщите мне, если это вам поможет! Приветствия.
Относится к d3.js 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