8wDlpd.png
8wDFp9.png
8wDEOx.png
8wDMfH.png
8wDKte.png

平稳过渡

Daniel Benedí 2月前

23 0

我一直在 Nextjs 应用程序中尝试 D3 库,并尝试让缩放和平移正常工作。现在,我设法让缩放和平移正常工作。我遇到的问题是重置...

我一直在 Nextjs 应用中试用 D3 库,并尝试让缩放和平移正常工作。现在,我设法让缩放和平移正常工作。我遇到的麻烦是重置图表。

我有这个功能,单击按钮可以重置图表上的任何缩放或平移。

  function handleClick() {
    var selection = d3.select(svgRef.current).select(".toZoom");

    selection
      .transition()
      .duration(750)
      .tween("attr.transform", () => {
        var i = d3.interpolateString(
          "scale(1, 1)" + `translate(0,${height - margin.bottom})`,
          "scale(1, 1) translate(0,0)",
        );
        return (t) => {
          selection.attr("transform", i(t));
        };
      });
  }

我设法让这个函数工作(大部分来自文档)。我不能说我 100% 知道发生了什么。我对此实现的主要问题是图表重置到其原始位置,然而,在此之前,它会从视图中消失并从侧面浮动。我希望它无缝过渡回其原点而不消失。

有什么帮助吗?如果能提供一些材料/解释,说明 tween s 插值的 含义,我将不胜感激。(从 D3 文档中并没有真正理解这一点。)

帖子版权声明 1、本帖标题:平稳过渡
    本站网址:http://xjnalaquan.com/
2、本网站的资源部分来源于网络,如有侵权,请联系站长进行删除处理。
3、会员发帖仅代表会员个人观点,并不代表本站赞同其观点和对其真实性负责。
4、本站一律禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报
5、站长邮箱:yeweds@126.com 除非注明,本帖由Daniel Benedí在本站《reactjs》版块原创发布, 转载请注明出处!
最新回复 (0)
返回
作者最近主题: