Javascript d3（v4）：赋予元素动量的外观？

假设您希望有一个html页面，其中整个背景是svg，这样会不断出现一些动画。在这个愚蠢的例子中，我做了一个随机移动的笑脸。虽然有些人可能会发现布朗运动吸引眼球，但如果svg元素能够以动量（方向和旋转）的形式移动就更好了

人们可能很快就会意识到，让一个对象沿着一条路径移动可以解决这个问题，它将。。。对于对象的第一个过程。然而，如果元素被屏幕所限制，那么如何使过渡调整为偏转

简言之，问题如下：

使用d3.js v4，如何使svg元素（如下面演示中的

#Mr_Smiley

）在html页面上浮动*

*让float mean在svg空间内以恒定速度沿矢量或圆弧平滑移动，并在击中边界时产生反冲，并纠正偏转

var mr_s=d3.select（“svg”）.append（“g”）.attr（“id”、“mr_Smiley”）
mr_.s.append（“circle”）.attr（“cx”，30）.attr（“cy”，30）.attr（“r”，30）.style（“fill”，“yellow”）.style（“stroke”，“black”）
mr_.s.append（“circle”）.attr（“cx”，20）.attr（“cy”，20）.attr（“r”，5）.style（“fill”，“black”）
mr_.s.append（“circle”）.attr（“cx”，40）.attr（“cy”，20）.attr（“r”，5）.style（“fill”，“black”）
mr_.append（“path”）.attr（“d”，“M20 40 A 10 10 0 0 40”）.style（“fill”，“black”）
mr_.s.datum（{“x”：30，“y”：30，“r”：1}）
mr_.s.attr（“transform”，函数（d）{“translate”（+d.x+），“+d.y+”）旋转（“+d.r+”））
dur=100
步骤=10
//让S先生去旅行吧
d3.选择（“Mr#u Smiley”）
.transition（）
.持续时间（dur）
.on（“开始”，函数重复（）{
d3.主动（本）
.attr（“转换”，
职能（d）
{
//更新y
如果（Math.random（）>=.5）{
d、 y+=阶跃
}否则{
d、 y-=阶跃
//基本界限
如果（d.y<0）{
d、 y=0
}
}
//更新x
如果（Math.random（）>=.5）{
d、 x+=阶跃
}否则{
d、 x-=阶跃
如果（d.x<0）{
d、 x=0
}
}
//更新r
如果（Math.random（）>=.5）{
d、 r+=阶跃
}否则{
d、 r-=阶跃
}
返回“平移（“+d.x+”，“+d.y+”）旋转（“+d.r+”）
})
.transition（）
.attr（“转换”，
职能（d）
{
//更新y
如果（Math.random（）>=.5）{
d、 y+=阶跃
}否则{
d、 y-=阶跃
}
//更新x
如果（Math.random（）>=.5）{
d、 x+=阶跃
}否则{
d、 x-=阶跃
}
//更新r
如果（Math.random（）>=.5）{
d、 r+=阶跃
}否则{
d、 r-=阶跃
}
返回“平移（“+d.x+”，“+d.y+”）旋转（“+d.r+”）
})
.transition（）
.on（“开始”，重复）
})
安先生（mouseover，mouseover）
安先生（mouseout，mouseout）
功能鼠标盖（d，i）{
var svg=d3.选择（“svg”）
svg.append（“text”）.attr（“id”，“mouseover_text”）.text（“上帝保佑我，这太不顺利了”）.attr（“x”，d.x）。attr（“y”，d.y）
}
函数mouseout（d，i）{
d3.选择（“#鼠标覆盖文本”）.remove（）
}

html，正文{
宽度：100%；
身高：100%；
}
svg{
位置：绝对位置；
宽度：100%；
身高：100%；
背景颜色：浅蓝色；
边框：1px黑色实心；
}

斯迈利先生去旅行了

以下是最简单的s先生在房间里蹦蹦跳跳，我可以使用

d3

惯例进行编码：

var w=250，
h=250，
r=30；
var svg=d3.select（'body'）
.append（'svg'）
.attr（'宽度'，w）
.attr（'高度'，h）
.style（'border'，'1px实心钢蓝'）；
var ix=Math.random（）*（（Math.random（）>0.5）？5:-5），
iy=Math.random（）*（（Math.random（）>0.5）？5:-5），
x=w/2，
y=h/2；
var mr_s=svg.append（“g”）
.attr（“id”、“Mr_Smiley”）
附加先生（“圈”）
.attr（“r”，r）
.样式（“填充”、“黄色”）
.风格（“笔划”、“黑色”）；
附加先生（“圈”）
.attr（“cx”，-10）
.attr（“cy”，-10）
.attr（“r”，5）
.样式（“填充”、“黑色”）；
附加先生（“圈”）
.attr（“cx”，10）
.attr（“cy”，-10）
.attr（“r”，5）
.样式（“填充”、“黑色”）；
附加先生（“路径”）
.attr（“d”、“M-10101010”）
.样式（“填充”、“黑色”）；
mr_s.attr（'transform'、'translate（'x+'、'y+'））；
d3.间隔（勾号20）；
函数tick（）{
x+=ix；
y+=iy；
如果（x>（w-r）| | x（h-r）| | y

“看似浮动”对任何程序员来说都太模糊了。你得说得更具体些。我想，在每一个拐角前稍微减速，然后在海峡上再加速一次。对吗？为什么要投否决票？这是个好主意question@GerardoFurtado我假定为“float”一词添加了更多细节@Lissy，但这需要大量手动校准来检测边缘的接近程度，并且不能解决偏转问题。也可以增加持续时间（

dur

）和步长（

step

），但是每个过渡之间的动画看起来都很清晰