How to center a node on from external event

[hyper-dot]

Hi, Really sorry if I wasn't suppose to ask this question. But I really tried everything I could to center a node on render. But couldn't. I saw the example on code sandbox. It is setting the dimention of tree container. I have also set dimention like that.

    <div
      id="treeWrapper"
      ref={containerRef}
      style={{ width: "100%", height: "100%" }}
      className="fixed"
    >
      <button onClick={handleCenterUser} className="absolute top-4 right-28">
        Center Me
      </button>

      {data ? (
        <Tree
          dimensions={dimentions}
          data={data}
          scaleExtent={{ max: 10, min: 0.3 }}
          pathFunc={stepPathFunc}
          pathClassFunc={customPathClass}
          nodeSize={nodeSize}
          translate={translate}
          orientation="vertical"
          enableLegacyTransitions
          renderCustomNodeElement={(rd3tProps: any) =>
            renderForeignObjectNode({ ...rd3tProps, foreignObjectProps })
          }
        />
</div>

  const handleCenterUser = () => {
    const user = document.getElementById("isuser");
    if (user && containerRef.current) {
      const { x, y } = user.getBoundingClientRect();
      const { height, width } = containerRef.current.getBoundingClientRect();
    }
  };

I am able to get height and width of the container and the x & y cordinates of the node that I want to center. But I am unable to center the node using translate. When I translate using those cordinates I can't move the tree freely.

[vitallygolovanov]

Just weighing in to say, that I also want to be able to trigger centering/focus on a node externally. User clicks a "show me" button, and the tree centers on their node.