zoom jumps when using mouse after zoom In/out

Question

I am Trying to display my full svg tree within the display in a center view.

var svg = d3.select("body").append("svg")
   .call(d3.zoom().on("zoom", function () {
            svg.attr("transform", d3.event.transform);
    })).on("dblclick.zoom", null)
   .attr("width", "1000")
   .attr("height",590)
   .append("g")
svg.attr("transform",function(d) {
   return "translate(" + 450 + "," + svgHeight + ") scale(" + scale + ")";
} );

I am adjusting the scale and height properties of the transform depends on the number of nodes, actually its working fine.

The problem is when I am trying to zoom in/out on the tree for the first time , its not zooming the focused node.

This occurs only when I am doing zoom for first time, from second time its zooming the pointing node.

This is what I tried so far : Codepen

Answer 1

A drawback of the otherwise solid solution @soundquiet posted is that it disrupts panning behaviour, leading to some sort of rapid shifting of the nodes.

A simpler, and more robust solution is shown below. I just wrap the g-element inside another g element called zoomContainer and call all zoom behaviour on that instead.

var treeData = {
  "name": "Share point Server 2019",
  "id": "a093F0000078Id5QAE",
  "children": [{
    "name": "is extended by",
    "level": "sub node",
    "children": [{
      "name": "Share point Server 2019",
      "id": "a093F0000078Id5QAE"
    }]
  }, {
    "name": "manages",
    "level": "sub node",
    "children": [{
      "name": "HPE ProLiant ML350 Tower",
      "id": "a093F0000078IcHQAU"
    }, {
      "name": "HPE ProLiant ML350 Tower",
      "id": "a093F0000078IcHQAU"
    }, {
      "name": "HPE ProLiant ML350 Tower",
      "id": "a093F0000078IcHQAU"
    }, {
      "name": "HPE ProLiant ML350 Tower",
      "id": "a093F0000078IcHQAU"
    }, {
      "name": "HPE ProLiant ML350 Tower",
      "id": "a093F0000078IcHQAU"
    }, {
      "name": "HPE ProLiant ML350 Tower",
      "id": "a093F0000078IcHQAU"
    }, {
      "name": "HPE ProLiant ML350 Tower",
      "id": "a093F0000078IcHQAU"
    }, {
      "name": "HPE ProLiant ML350 Tower",
      "id": "a093F0000078IcHQAU"
    }, {
      "name": "HPE ProLiant ML350 Tower",
      "id": "a093F0000078IcHQAU"
    }, {
      "name": "HPE ProLiant ML350 Tower",
      "id": "a093F0000078IcHQAU"
    }, {
      "name": "HPE ProLiant ML350 Tower",
      "id": "a093F0000078IcHQAU"
    }]
  }, {
    "name": "is operated by",
    "level": "sub node",
    "children": [{
      "name": "Power point SH-20",
      "id": "a093F00000794ZWQAY"
    }]
  }]
};
var scale = 1,
  svgHeight = 200,
  nodeCount = 13;;
var margin = {
    top: 20,
    right: 90,
    bottom: 30,
    left: 90
  },
  width = window.outerWidth,
  height = window.outerHeight;
var focused = false;
console.log('scale', scale)
var zoomContainer = d3.select("body").append("svg")
  .call(d3.zoom().on("zoom", function() {
    zoomContainer.attr("transform", d3.event.transform);
  })).on("dblclick.zoom", null)
  .attr("width", "1000")
  .attr("height", 590)
  .append("g")

var svg = zoomContainer
  .append("g")
  .attr("transform", function(d) {
    return "translate(" +
      (450) + "," + (svgHeight) + ") scale(" + scale + ")";
  });

var i = 0,
  duration = 750,
  root;
// declares a tree layout and assigns the size
var treemap = d3.tree().size([height, width]);

// Assigns parent, children, height, depth
root = d3.hierarchy(treeData, function(d) {
  return d.children;
});
root.x0 = height;
root.y0 = 0;

// Collapse after the second level
if (typeof collapse === 'undefined')
  root.children.forEach(collapse);

update(root);

// Collapse the node and all it's children
function collapse(d) {
  if (d.children) {
    d._children = d.children
    d._children.forEach(collapse)
    d.children = null
  }
}

function update(source) {

  // Assigns the x and y position for the nodes
  var treeData = treemap(root);

  // Compute the new tree layout.
  var nodes = treeData.descendants(),
    links = treeData.descendants().slice(1);
  let left = root;
  let right = root;
  var dx = ((nodeCount * 18) / 1000);
  // Normalize for fixed-depth.
  nodes.forEach(function(d, index) {
    d.y = d.depth * 180;
    d.x = d.x * ((nodeCount * 18) / 1000);

  });
  // ****************** Nodes section ***************************

  // Update the nodes...
  var node = svg.selectAll('g.node')
    .data(nodes, function(d) {
      return d.id || (d.id = ++i);
    });

  // Enter any new modes at the parent's previous position.
  var nodeEnter = node.enter().append('g')
    .attr('class', 'node')
    .attr("transform", function(d) {
      return "translate(" + (source.y0) + "," + (source.x0) + ")";
    })
    .on('click', d => {
      // d3.event.preventDefault();

      component.set("v.nodeName", d.data.name);
    })
    .on("dblclick", click);


  // Add Circle for the nodes
  nodeEnter.append('circle')
    .attr('class', 'node')
    .attr('r', 1e-6)
    .style('stroke', 'steelblue')
    .style('stroke-width', '3px');

  // Add labels for the nodes
  nodeEnter.append('text')
    .attr("dy", ".35em")
    .attr("x", function(d) {
      return d.children || d._children ? -13 : 13;
    })
    .attr("text-anchor", function(d) {
      return d.children || d._children ? "end" : "start";
    })
    .text(function(d) {
      return d.data.name;
    });

  // UPDATE
  var nodeUpdate = nodeEnter.merge(node);

  // Transition to the proper position for the node
  nodeUpdate.transition()
    .duration(duration)
    .attr("transform", function(d) {
      return "translate(" + (d.y) + "," + (d.x) + ")";
    });

  // Update the node attributes and style
  nodeUpdate.select('circle.node')
    .attr('r', 3)
    .style("fill", function(d) {
      return d._children ? "lightsteelblue" : "#fff";
    })
    .attr('cursor', 'pointer');


  // Remove any exiting nodes
  var nodeExit = node.exit().transition()
    .duration(duration)
    .attr("transform", function(d) {
      return "translate(" + (source.y) + "," + source.x + ")";
    })
    .remove();

  // On exit reduce the node circles size to 0
  nodeExit.select('circle')
    .attr('r', 1e-6);

  // On exit reduce the opacity of text labels
  nodeExit.select('text')
    .style('fill-opacity', 1e-6);

  // ****************** links section ***************************

  // Update the links...
  var link = svg.selectAll('path.link')
    .data(links, function(d) {
      return d.id;
    });

  // Enter any new links at the parent's previous position.
  var linkEnter = link.enter().insert('path', "g")
    .attr("class", "link")
    .style('fill', "none")
    .style('stroke', "#ccc")
    .style('stroke-width', "2px")
    .attr('d', function(d) {
      var o = {
        x: source.x0,
        y: source.y0
      }
      return diagonal(o, o)
    });

  // UPDATE
  var linkUpdate = linkEnter.merge(link);

  // Transition back to the parent element position
  linkUpdate.transition()
    .duration(duration)
    .attr('d', function(d) {
      return diagonal(d, d.parent)
    });

  // Remove any exiting links
  var linkExit = link.exit().transition()
    .duration(duration)
    .attr('d', function(d) {
      var o = {
        x: source.x,
        y: source.y
      }
      return diagonal(o, o)
    })
    .remove();

  // Store the old positions for transition.
  nodes.forEach(function(d) {
    d.x0 = d.x;
    d.y0 = d.y;
  });

  // Creates a curved (diagonal) path from parent to the child nodes
  function diagonal(s, d) {
    var path = "M" + d.y + "," + d.x +
      "C" + (d.y + s.y) / 2 + "," + d.x +
      " " + (d.y + s.y) / 2 + "," + s.x +
      " " + s.y + "," + s.x;

    return path;
  }

  // Toggle children on click.
  function click(d) {

  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.min.js"></script>
<div style="background:white" id="body"></div>