D3.js Başlangıçtaki yakınlaştırma seviyesini ayarla

Question

Konteynırı büyütmek için birkaç grafik hazırladım ve harika çalışıyor. Bununla birlikte, ilk yükte, yakınlaştırma seviyesi çok yakın. İlk uzaklaştırma düzeyine sahip olmaktan kaçınmak için ilk yakınlaştırma seviyesini ayarlama yöntemi var mı? .scale() yöntemine aşinayım, ancak bunu uygulayan hiçbir şansım olmadı. Gidecek ya da eksik olduğum bir şey mi var? Sonunda ilk dönüşümü hem ve aynı değere yakınlaştırma davranışını ayarlayarak çalışmak bu var

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

: Burada

Ben bugüne kadar Büyütmek ait olarak ne var.

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

durumda herkes kabul edilen yanıt bir ek olarak bu cevabı eklenmesi hala yaşıyor sorunları:

söyleniyor anlamak için bu gerçekten kolay bir şey here

arıyordum,

ölçekli istediğiniz ilk ölçektir

ölçek, zoomWidth ve zoomHeight: üç değişken set zum olması ve daha sonra

aşağıdaki gibi zoomWidth ve zoomHeight tanımlandığı

:

zoomWidth = (width-scale*width)/2 
zoomHeight = (height-scale*height)/2 

genişlik ve yükseklik

yukarıda tercüme etmek "vis" svg elemanının genişliği ve yüksekliği

olduğu

.attr("transform", "translate("+zoomWidth+","+zoomHeight+") scale("+scale+")") 

yanı sıra yakınlaştırma işlevi:

sonra olmak üzere değiştirilmiş

Bu etkili bir şekilde görselleştirmeniz yüklendiğinde öğelerinizin yakınlaştırılmasını ve ortalanmasını sağlar.

Eğer bu size yardımcı olursa haberim olsun! Şerefe.

Answer 3

burada arıyorsanız

cevap D3v4 aynı ama D3 v4 ile

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

Bu v4

olduğunu d3.js Geçerli davcs86's answer benzeri, ancak bir ilk dönüşümü yeniden kullanır ve z'yi uygular. oom fonksiyonu.

// 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); 
    } 
}; 

görün Yürüt: jsbin link