D3.js Установите начальный уровень масштабирования

Question

У меня есть несколько графиков, предназначенных для увеличения размера контейнера, и он отлично работает. Однако при начальной загрузке уровень масштабирования слишком близко. Есть ли способ установки начального уровня масштабирования, чтобы избежать необходимости сначала уменьшать масштаб? Я знаком с методом .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'); 

Answer 1

я наконец получил эту работу, установив как преобразование начальное и поведение масштабирования на то же значение.

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)"); 

Answer 2

Добавление этот ответ в качестве дополнения к принятому ответу в случае, если кто до сих пор имеют проблемы:

То, что сделал это очень легко понять, смотрел here

Это, как говорится, я установить три переменные:

шкала, 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) 

Это эффективно гарантирует, что ваш элемент будет увеличен и центрирован при загрузке вашей визуализации.

Дайте мне знать, если это поможет вам! Приветствия.

Answer 3

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)"); 

Answer 4

Относится к d3.js v4

Это аналогично davcs86's answer, но он повторно использует начальное преобразование и реализует z oom.

// 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 link