D3 禁用加载时的初始动画

问题描述 投票:0回答:1

我只想做这个简单的事情,经过大量谷歌搜索后找不到任何答案(顺便说一句,D3 中的菜鸟)。 示例代码加载json文件并绘制它 这是全部代码

<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>

看到有transition()、Duration()、interrupt(),但不知道如何链接它们。 希望有一些简单的动画标志。 谢谢您的帮助!

javascript animation d3.js
1个回答
0
投票

我假设您指的是水平矩形向右“增长”的初始绘制过渡?

这是由这条线控制的。 不幸的是,我看不到库的 API 会对其产生任何影响。 API 提供了一个

transitionDuration
(我认为您可以将其设置为
0
来禁用),但这不适用于此特定转换的 duration

如果您习惯于编辑库,则只需注释掉第 311 行和 312 行即可删除初始过渡。

这是一个示例,我就是这么做的。

© www.soinside.com 2019 - 2024. All rights reserved.