D3.js Đặt mức thu phóng ban đầu

Question

Tôi có một số đồ thị được thiết lập để phóng to vùng chứa và nó hoạt động rất tốt. Tuy nhiên, khi tải ban đầu, mức thu phóng quá gần. Có phương pháp thiết lập mức thu phóng ban đầu để tránh phải thu nhỏ đầu tiên không? Tôi đã quen thuộc với phương thức .scale() nhưng chưa có bất kỳ may mắn nào khi triển khai nó. Đây có phải là con đường để đi hoặc có cái gì đó tôi đang thiếu?

Dưới đây là những gì tôi có cho đến nay như liên quan đến phóng to:

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

cuối cùng tôi nhận được để làm việc này bằng cách thiết lập cả ban đầu biến đổi và hành vi zoom để cùng giá trị.

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

Thêm câu trả lời này như là một phụ lục cho câu trả lời được chấp nhận trong bất cứ trường hợp vẫn còn có vấn đề:

Cái điều làm cho điều này thực sự dễ dàng để hiểu được tìm here

Điều đó đang được nói, tôi đặt ba biến:

tỷ lệ, thu phóng và zoomHeight

tỷ lệ là quy mô ban đầu bạn muốn zoom được, và sau đó

zoomWidth và zoomHeight được định nghĩa như sau:

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

nơi chiều rộng và chiều cao là chiều rộng và chiều cao của "vis" yếu tố svg

các dịch trên là sau đó được sửa đổi là:

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

cũng như chức năng zoom:

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

Điều này có hiệu quả đảm bảo rằng phần tử của bạn được thu phóng và căn giữa khi hình ảnh của bạn được tải.

Hãy cho tôi biết nếu điều này giúp bạn! Chúc mừng.

Answer 3

D3v4 trả lời

Nếu bạn đang ở đây tìm kiếm giống nhau nhưng với 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

Áp dụng cho d3.js v4

Đây là tương tự như davcs86's answer, nhưng nó reuses một biến đổi ban đầu và thực hiện các z chức năng 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); 
    } 
}; 

Nhìn thấy nó trong hành động: jsbin link