Question

我想使用CSS calc计算div的left属性的开始和/或结束值，我想通过使用d3js styleTween使其平滑移动。但是在开始向正确的终点过渡之前，div朝相反的方向跳动。

我使用Chromium版本73.0.3683.75和Firefox 60.7.0esr（64位）测试了该代码。两者都会产生相同的意外行为。

使用this.style.left作为d3.interpolate中的第一个参数不会改变结果。

我在d3js styleTween文档中找不到可以使用calc的警告，并且在过渡结束时仍然有效。

我希望先计算calc值，然后将结果传递给插值函数，即可解决此问题。但是我不确定这是否可能。

<!DOCTYPE html>
<html>
    <head>
        <title>Odd interpolation with CSS calc and d3 styleTween</title>

        <style>
        html {height: 100%;}
        body {height: 100%; margin:0; }

        div.button {
        position: absolute;
        left: 20%;
        width: 3rem;
        height: 100%;
        background-color: #0af;
        }
        </style>
    </head>

    <body>
        <div class="button" id="menu_toggle"></div>
    </body>

    <script src="https://d3js.org/d3.v4.min.js" />
    <script>
        menu = function()
        {
            var div = d3.select('div.button');
            var is_left = true;
            function toggle_menu()
        {
            var left = "20%"
            var right = "calc(80% - 3rem)"
            if (is_left)
            {
                is_left = false;
                div.transition().duration(2000)
                                .styleTween('left', function() { return d3.interpolate(left, right); });
            }
            else
            {
                is_left = true;
                div.transition().duration(2000)
                                .styleTween('left', function() { return d3.interpolate(right, left); });
            }
        }
        return {toggle_menu:toggle_menu}
        }()

        d3.select('#menu_toggle').on("click", menu.toggle_menu)
    </script>
</html>

我希望两个位置20％和80％-3rem之间能平稳过渡。

当div从左侧开始时，它首先向左跳3rem，然后向右移动。同样，如果div在右侧，则它会先向右跳3rem，然后再向左移动。

Answer 1

问题很简单：您要插入字符串，而不是其求值。

在CSS中执行此操作时...

calc(80% - 3rem)

...它将被评估为像素值。到目前为止，一切都很好。但是，D3内插器是从"20%"到"calc(80% - 3rem)"的字面值（双关语）。当然，插值器不知道如何处理，实际上是从"calc(20% - 3rem)"插值到"calc(80% - 3rem)"。

让我们看看：

const interpolator = d3.interpolate("20%", "calc(80% - 3rem)");
d3.range(0, 1.1, 0.1).forEach(d => {
  console.log(interpolator(d))
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>

最简单的解决方案是评估 calc()的结果并在插值器中使用该值。有几种方法可以做到这一点，例如使用this library。

因此，假设在评估之后，我们具有诸如150px和430px之类的值。现在插值很简单：

const interpolator = d3.interpolate("150px", "430px");
d3.range(0, 1.1, 0.1).forEach(d => {
  console.log(interpolator(d))
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>

Answer 2

由于 d3s 字符串插值使用第二个输入（结果字符串）作为模板并将它找到的任何数字与第一个输入的对应数字（按索引匹配）进行插值，因此您可以通过对两者进行插值来避免手动评估 css calc值：

calc(20% - 0rem)

在d3js中使用CSS Calc时发生意外过渡

2 个答案: