search

ssthouse / tree-chart

Flexible tree chart using Canvas and Svg, powered by D3.js; ✅Support Vue, Vue3 and React;
https://ssthouse.github.io/tree-chart/#/svgTree
MIT License
435 stars 96 forks source link

add feature to go to a node #84

Open AliRezaHosseiniOfficial opened 2 years ago

AliRezaHosseiniOfficial commented 2 years ago

Hello Is there a feature to switch the chart to the corresponding node location ?

adevicq commented 2 years ago

Hi I don't know if this is the same need, but mine is: provide a method to center the chart on a specific node. I did something on my side but it would be useful to have it as a standard function. For example, I give the possibility to a user to search for a person and I center the chart on the found node.

tylerdelange commented 2 years ago

@adevicq Can I ask how you accomplished centering the node to the screenspace?

adevicq commented 2 years ago

Hi, If you inspect the DOM, you will find two elements under a DIV which class is "tree-container" image These two elements (SVG and DIV) have a style which defines the position of the diagram: style="transform: scale(1) translate(1024px, -15px); transform-origin: center center;" You have to play with the "translate" parameter to move the view up/down and right/left. Store the initial values of the two values in the translate property and move the view according to the desired coordinates.

Hope this helps.

awaisamir123 commented 11 months ago

@adevicq How can we calculate this transformation? Suppose a node has properties such as width, height, top, and left. How can we manipulate these properties to determine the transformation translation values for X and Y?