Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

change node position after chart render #435

Open
mohcinsarrar opened this issue Sep 14, 2024 · 1 comment
Open

change node position after chart render #435

mohcinsarrar opened this issue Sep 14, 2024 · 1 comment

Comments

@mohcinsarrar
Copy link

Hi i want to change the x position of some nodes after chart render, i need to execute that after chart render because a calculate the nex position according to the old position of the node an another node

this is my function

function change_node_position(staticNodeId, changedNodeId, index) {

    // After rendering, manually adjust the position of the two specific nodes
    const staticNode = d3.select(`[data-nodeId="${staticNodeId}"]`); // Replace `node_id_1` with the actual node ID or class
    const changedNode = d3.select(`[data-nodeId="${changedNodeId}"]`); // Replace `node_id_2` with the actual node ID or classc

    if (staticNode.node() == null || changedNode.node() == null) {
        return false;
    }

    // Get current positions (x and y) of the two nodes

    const staticNodeCord = extract_cord(staticNode.attr('transform'))
    const changedNodeCord = extract_cord(changedNode.attr('transform'))

    // Adjust the margin by changing the x position of the second node
    const customMargin = (treeConfiguration.nodeWidthSpouse + 25) + ((treeConfiguration.nodeWidth + 25) * (index - 1)) ; // Set a custom margin between these two nodes
    changedNode.attr('transform', `translate(${staticNodeCord.x + customMargin}, ${changedNodeCord.y})`); // Adjust x position only

    const newnode1cord = extract_cord(changedNode.attr('transform'))
    /////////////////
    const path = d3.select(`[data-from="${staticNodeId}"][data-to="${changedNodeId}"]`);

    path.attr("d", update_path_position(path.attr("d"), newnode1cord.x));

}

i execute my function after chart.render(), but nothing happen, but when i execute the funtion when i click on a button its position nodes perfectly

@bumbeishvili
Copy link
Owner

I don't think that you can do that.

If you are willing to modify the source code, you can plug your code at the end of this function

calculateCompactFlexPositions(root) {

Also your issue gave me an idea to further make it flexible, so in the future I will expose a way for the user to be able to modify coordinates

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants