amChart display link if one node is collapsed

Question

Is it possible to visualize amChart links, in a way, that the link to another child will refer to the parent if the child is still not expanded? For example, I want to visualize server client relationships. The nodes clients and servers contain childs and can be expanded by click. The client child C2 got a connection to S1. Unfortunately those conneciton will be only visible if those related nodes are displayed. In case the server group is still collapsed, the references is not shown.

Expanded Clients, references from C2 to S1 not shown:

Collapsed Clients and Servers displays reference between C2 and S1.

  var root = am5.Root.new("amChart");

        root.setThemes([
            am5themes_Animated.new(root)
        ]);

        var data = {
            name: "Root",
            value: 0,
            children: [
                {
                    name: "Clients", value: 10,
                    children: [
                        {
                            name: "C1", value: 1,
                            linkWith: ["Service AB"]
                        },
                        {
                            name: "C2", value: 1
                        }
                    ]
                },
                {
                    name: "Servers", value: 10,
                    linkWith: ["Clients"],
                    children: [
                        {
                            name: "S1",
                            linkWith: ["C2"]
                        },
                        {
                            name: "Group1",
                            children: [
                                { 
                                    name: "S3", value: 1,
                                    linkWith: ["C1"]
                                },
                            ]
                        }
                    ]
                }
            ]
        };

        // Create wrapper container
        var container = root.container.children.push(
            am5.Container.new(root, {
                width: am5.percent(100),
                height: am5.percent(100),
                layout: root.verticalLayout
            })
        );

        // Create series
        // https://www.amcharts.com/docs/v5/charts/hierarchy/#Adding
        var series = container.children.push(
            am5hierarchy.ForceDirected.new(root, {
                singleBranchOnly: false,
                downDepth: 1,
                topDepth: 1,
                maxRadius: 25,
                minRadius: 12,
                valueField: "value",
                categoryField: "name",
                childDataField: "children",
                idField: "name",
                linkWithStrength: 1,
                linkWithField: "linkWith",
                manyBodyStrength: -15,
                centerStrength: 0.5
            })
        );

        series.get("colors").set("step", 2);
        
        series.nodes.template.events.on("rightclick", function(ev) {
            console.log("click")
        })

        series.data.setAll([data]);
        series.set("selectedDataItem", series.dataItems[0]);

        // Make stuff animate on load
        series.appear(1000, 100);

        // Disable built-in context menu
        root.addDisposer(
            am5.utils.addEventListener(root.dom, "contextmenu", function(ev) {
                ev.preventDefault();
            })
        );

    body {
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    }

    #amChart {
        width: 100%;
        height: 600px;
    }





    
    amChart

amChart display link if one node is collapsed

0 Answers