Question

我有一个具有缩放行为的力布局。

var min_zoom = 0.3;
var max_zoom = 3;
var zoom = d3.behavior.zoom().scaleExtent([min_zoom,max_zoom]);

在提交表单之前，按预期进行缩放（使用鼠标滚轮）和翻译工作就可以了。

svg.attr("transform", "translate(" + d3.event.translate + ")" + " scale(" +  d3.event.scale + ")" );

为此，生活是美好的。

提交表单后，当前的translate和scale值将保存到会话中。例如，假设当前的scale是2。提交表单并再次加载页面后，将应用保存的scale，将缩放恢复到提交前的状态。

但是，在页面加载后，d3.event.scale的值再次设置为其初始值（我猜是1）。因此，尝试再次执行放大或缩小操作（使用鼠标滚轮），将比例因子应用于缩放的初始基本值（假设1为d3.event.scale），而不是使用从会话2，并且会突然发生意外的缩放变化。

PS。尝试手动为d3.event.scale分配值是行不通的！我认为最直接的解决方法是在可能的情况下更改d3.event.scale。否则，手动控制缩放似乎是一个详尽且不直观的选择。

Answer 1

在创建SVG时，您需要调整主组的变换并设置缩放比例。

const previousScale = 2;

const min_scale = 0.3;
const max_scale = 3;

const width = 600;
const height = 200;

var zoom = d3.behavior.zoom()
  .scale(previousScale)
  .scaleExtent([min_scale, max_scale])
  .on('zoom', redraw)

const svg = d3.select('svg')

const g = svg
  .attr('width', width)
  .attr('height', height)
  .append('g')
  .attr('transform', `scale(${previousScale}, ${previousScale})`)
  .call(zoom)

function draw() {
  g.append('circle')
    .attr('r', 50)
    .attr('cx', 50)
    .attr('cy', 50)

  const initialScale = zoom.scale();
  console.log(`initialScale: ${initialScale}`)
}
draw()

function redraw() {
  const newScale = zoom.scale();
  g.attr('transform', `scale(${newScale}, ${newScale})`)
  console.clear()
  console.log(`newScale: ${newScale.toFixed(2)}`)
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<svg></svg>

强制布局在会话中保存缩放比例：d3.event.scale

1 个答案: