D3.js Ustaw początkowy poziom powiększenia

Question

Mam kilka wykresów skonfigurowanych do powiększania kontenera i działa świetnie. Jednak przy początkowym załadowaniu poziom powiększenia jest zbyt blisko. Czy istnieje metoda ustawiania początkowego poziomu zoomu, aby uniknąć konieczności pierwszego pomniejszenia? Jestem zaznajomiony z metodą .scale(), ale nie miałem żadnej możliwości jej implementacji. Czy to jest droga, czy jest coś, czego mi brakuje?

Oto co mam do tej pory jako odnoszące się powiększać:

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

I wreszcie to działało przez ustawienie zarówno początkowa transformacji i zachowania zoomu do tej samej wartości.

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

Dodając tę ​​odpowiedź jako uzupełnienia do przyjętego odpowiedzi w przypadku gdy ktoś jest nadal występują problemy:

Tym, co to naprawdę łatwe do zrozumienia szukałem here

takiej sytuacji, ja ustawić trzy zmienne:

skalę zoomWidth i zoomHeight skala

jest początkowa skala chcesz zoom być, a następnie

zoomWidth i zoomHeight są zdefiniowane następująco:

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

gdzie szerokość i wysokość są szerokość i wysokość „vis” element SVG

powyższego przeliczenia jest następnie wprowadza się:

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

jak funkcja zoom:

d3.behavior.zoom().translate([zoomWidth,zoomHeight]).scale(scale) 

To, co robi, skutecznie zapewnia powiększenie i wyśrodkowanie elementu podczas ładowania wizualizacji.

Daj mi znać, jeśli to Ci pomoże! Twoje zdrowie.

Answer 3

D3v4 odpowiedzieć

Jeśli tu szukasz to samo, ale z 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

Dotyczy d3.js v4

Jest podobne do davcs86's answer, ale ponownie wykorzystuje początkową transformację i implementuje z funkcja 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); 
    } 
}; 

Zobacz go w akcji: jsbin link