D3 disable initial animation on load

Sample code loads a JSON file and draws it. There are transition(), Duration() and interrupt() but how do I link them? Was hoping there is some simple animate flag

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="${flcss}" />
    </head>
    <body>
        <div id="chart"></div>
        <script type="text/javascript" src="https://d3js.org/d3.v7.js"></script>
        <script
            type="text/javascript"
            src="https://cdn.jsdelivr.net/npm/[email protected]/dist/d3-flamegraph.min.js"
            ></script>
        <script type="text/javascript">
            var chart = flamegraph().width(960);
            
            d3.json("${json_file}")
                .then((data) => {
                    d3.select("#chart").datum(data).call(chart);
                })
                .catch((error) => {
                    return console.warn(error);
                });
        </script>
    </body>
</html>

Solution

I'm assuming you are referring to the initial draw transition where the horizontal rectangles "grow" to the right?

That is controlled by this line. Unfortunately, I don't see anyway to influence it from the API of the library. The API provides a transitionDuration (which I thought you could set to 0 to disable) but that is not applied to the duration of this specific transition (oddly to a delay though).

If you are comfortable editing the library, you can simply comment out lines 311 and 312 to remove the initial transition.

Here's is an example where I've done that.