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

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 3

如果有人仍然遇到问题,请将此答案添加为已接受答案的附录:

让这个很容易理解的东西就在这里

话虽这么说,我设置了三个变量:

scale,zoomWidth和zoomHeight

scale是您想要缩放的初始比例,然后

zoomWidth和zoomHeight定义如下:

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

其中width和height是"vis"svg元素的宽度和高度

然后将上述翻译修改为:

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

以及缩放功能:

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

这样做有效地确保在加载可视化文件时对元素进行缩放和居中.

如果这有助于你,请告诉我!干杯.

Answer 4

适用于d3.js v4

这类似于davcs86的答案，但是它重用了初始转换并实现了缩放功能。

// 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链接

Answer 5

D3JS 6 个回答

假设您希望初始位置和比例分别为x、y。scale

const zoom = d3.zoom();

const svg = d3.select("#containerId")
    .append("svg")
    .attr("width", width)
    .attr("height", height)
    .call(zoom.transform, d3.zoomIdentity.translate(x, y).scale(scale)
    .call(zoom.on('zoom', (event) => {
        svg.attr('transform', event.transform);
     }))
    .append("g")
    .attr('transform', `translate(${x}, ${y})scale(${k})`);

.call(zoom.transform, d3.zoomIdentity.translate(x, y).scale(scale)确保当缩放事件被触发时，event.transform变量会考虑平移和缩放。紧随其后的一行处理缩放，而最后一行仅用于在“启动”时应用一次平移和缩放。