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

話雖這麼說，我設置三個變量：

規模，求變寬度和zoomHeight

規模是你想要的初始規模變焦是，然後

求變寬度和zoomHeight定義如下：

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

其中寬度和高度是「可見」 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