不缩放就无法翻译初始d3.zoomIdentity

Question

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

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);

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)

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

Answer 1

Life is funny, sometimes!

Following Mark's suggestion, I created a code sample here . To my surprise, it worked. So I concluded it must be some other issue (my real tree is in a modal, etc.).

In cleaning up the code for the sandbox, I made the following changes, almost at random:

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

When I applied the same code to my actual code, everything just worked perfectly. I don't entirely understand why this works, but I think it has something to do with calling d3.zoom() again, rather than storing a reference to it. If someone more knowledgeable than me could comment I will incorporate that explanation into my answer.

Answer 2

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 :

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);

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