There is a dynamic hierarchy tree written by myself with d3.js library. When collapsing and expanding the nodes, the distance between the nodes is dynamically recalculated and the focus is shifted. This does not seem critical if you collapse or expand a node that has few descendants. But if there are many descendants, when you click, the distance changes and the node you clicked on moves to the side. Is there a way to keep the focus so that when you click, the mouse pointer does not move to the side, and the node is drawn relative to the position of the node that was clicked?

d3 version – “d3”: “^5.16.0”,

Here’s how to set up the tree and distances. This happens every time you collaps or expand nodes:

settingsTree(root, rect) {
      let elCountforLevel = this.getMaxElforlevel(root.children, 0) || 1
      let coef = 2.2
      if (elCountforLevel  > 100) {
        coef = this.calculateWidthCoefficient(elCountforLevel )
      }
      this.$set(this.svgSize, 'width', elCountforLevel  * rect.width + elCountforLevel  * (rect.width / coef))
      this.$set(this.svgSize, 'height', this.svgSizeOb.height)

      console.log(this.svgSize)

      var treemap = d3
        .tree()
        .nodeSize([rect.width, rect.height])
        .separation(function (a, b) {
          return a.parent == b.parent ? 30 : 30
        })
        .size([this.svgSize.width, this.svgSize.height])

      var treeData = treemap(root)

      return treeData
    },

And heres my “click” func:

function click(d, event) {
        d3.selectAll('.link').style('opacity', 0);
        const par = event.target.parentElement;
        const title = par.querySelector('title');

        if (d.children) {
          d._children = d.children
          d.children = null
          title.textContent = 'Раскрыть'
        } else {
          d.children = d._children
          d._children = null
          title.textContent = 'Скрыть'
        }
        updateStructure(d, correction);
      }

Also I made video example, how node moves to the side: https://dropmefiles.com/mHryS