不缩放就无法翻译初始d3.zoomIdentity [英] Cannot translate initial d3.zoomIdentity without jerkiness on zoom

问题描述

我正在使用D3 V4.我正在显示一个基本上像这样的树形图: https://bl.ocks.org/mbostock/4339184

I'm using D3 V4. I'm displaying a tree map that looks essentially like this: https://bl.ocks.org/mbostock/4339184

我正在尝试实现拖动和缩放.我还对zoomIdentity进行了转换，以在第一个渲染(margin.left和margin.top)上将地图移动固定量；

I'm trying to implement drag and zoom. I also have a transform applied to the zoomIdentity to shift the map over by a fixed amount on first render (margin.left and margin.top);

此帖子似乎与我的问题最接近，但是当我尝试将svg与g分开时，拖动非常困难.当我拖动时，每个节点都会抽动并跳来跳去.使用下面提供的代码，拖动很平滑，但是最开始的拖动将所有节点移到左侧(d3.event.transform x:0，y:0).

This post seems the closest to my issue, but when I try to separate the svg from the g, the drag is extremely jerky. Each of the nodes jerks and jumps around as I drag. With the code presented below, the drag is smooth, but the very initial drag moves all the nodes to the left (d3.event.transform x: 0, y: 0).

let margin = { top: 20, right: 120, bottom: 20, left: 120 },
width = 1000 - margin.right - margin.left,
height = 800 - margin.top - margin.bottom;

let zoom = d3.zoom();
let transform = d3.zoomIdentity.translate(margin.left, margin.top);
let svg = d3
    .select("#map")
    .attr("width", width + margin.right + margin.left)
    .attr("height", height + margin.top + margin.bottom)
    .call(zoom
        .on("zoom", () => {
            svg.attr("transform", d3.event.transform)
        }))
    .append("g")
    .attr("class", "view")

svg.call(zoom.transform, transform)

我不确定自己在做什么错，也不确定为什么svg的内容全都是生涩的.

I'm not sure what I'm doing wrong or specifically why the content of the svg is all jerky.

推荐答案

由于您对Map.js中的第43行感到很幸运，因此您的代码按原样运行，因此您手动应用了转换以防止其跳转".

Your code works as written because you got lucky with line 43 in Map.js, you manually applied the transform to keep it from "jumping".

 .attr("transform", transform)

保留对缩放的引用无关紧要，因为文档指出:

Keeping a reference to the zoom doesn't matter, as the docs state:

缩放行为将缩放状态存储在元素的 缩放行为已应用，而不是缩放行为本身.这是 因为缩放行为可以应用于许多元素 同时，每个元素都可以独立缩放.变焦 状态可以根据用户互动或通过编程方式更改 zoom.transform.

The zoom behavior stores the zoom state on the element to which the zoom behavior was applied, not on the zoom behavior itself. This is because the zoom behavior can be applied to many elements simultaneously, and each element can be zoomed independently. The zoom state can change either on user interaction or programmatically via zoom.transform.

记录下来，这就是我的编码方式:

For the record, here's how I would have coded it:

let transform = d3.zoomIdentity.translate(margin.left, margin.top);

// create zoom
let zoom = d3.zoom().on("zoom", () => {
  svg.attr("transform", d3.event.transform);
});    

// create svg apply zoom to it
// svg becomes the event handler
// storing as p to avoid confusion
let p = d3
  .select("#map")
  .attr("width", width + margin.right + margin.left)
  .attr("height", height + margin.top + margin.bottom)
  .call(zoom);   

// create g, store as svg, so I don't have to refactor code later
let svg = p    
  .append("g")
  .attr("class", "view");

// apply initial transform to g by acting on svg
p.call(zoom.transform, transform);

这是一个分叉的codeandbox .顺便说一句，顺便说一句，BTW对此并不了解.

Here's a forked codesandbox. That's a cool site, BTW, didn't know about that.

这篇关于不缩放就无法翻译初始d3.zoomIdentity的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！