我想使用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,然后再向左移动.
最佳答案
问题很简单：您要插值字符串,而不是插值.
当您在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,0.1).forEach(d => {
console.log(interpolator(d))
})<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>