Javascript 平滑字体大小

我有两个函数在我的数据标签之间。第一个函数称为

.on（mouseenter，

），第二个函数称为

.on（mouseout，

。第一个函数使数据标签字体变大，第二个函数应将其恢复为正常大小。这两个函数都是通过

.transition（）

和

.duration（500）

完成的

---

问题是，如果你鼠标足够快地进出，第二个功能实际上会使字体再次变大。d3没有像现在那样一直以20px的速度开始转换，而是有办法根据字体大小已经在转换中的位置开始转换回正常大小吗？

初始化插值器您必须将实际值设置为起始值，而不是使用静态结束值

12px

或

20px

。这可以通过使用

d3检索值轻松完成。选择（此）。样式（“字体”）

：

请看这个工作示例：

d3.选择全部（“文本”）
.on（“鼠标指针”，文本事件）
.on（“鼠标移动”，文本2）；
函数文本_事件（）{
d3.选择全部（“数据标签”）
.transition（）
.styleTween（'font'，function（））{
返回d3.interpolate（d3.select（this.style）（“font”），“20px Calibri”）
})
.期限（500）；
}
函数文本_event2（）{
d3.选择全部（“数据标签”）
.transition（）
.styleTween（'font'，function（））{
返回d3.interpolate（d3.select（this.style）（“font”），“12px Calibri”）
})
.期限（500）；
}

试验

初始化插值器时，必须将实际值设置为起始值，而不是使用静态结束值

12px

或

20px

。这可以通过使用

d3检索值轻松完成。选择（此）。样式（“字体”）

：

请看这个工作示例：

d3.选择全部（“文本”）
.on（“鼠标指针”，文本事件）
.on（“鼠标移动”，文本2）；
函数文本_事件（）{
d3.选择全部（“数据标签”）
.transition（）
.styleTween（'font'，function（））{
返回d3.interpolate（d3.select（this.style）（“font”），“20px Calibri”）
})
.期限（500）；
}
函数文本_event2（）{
d3.选择全部（“数据标签”）
.transition（）
.styleTween（'font'，function（））{
返回d3.interpolate（d3.select（this.style）（“font”），“12px Calibri”）
})
.期限（500）；
}

试验

你能试试d3.selectAll（）.transition（）.attr（'font-size'，'12px'）。duration（500）。transition（）.attr（'font-size'，'20px'）。duration（500）吗？这产生了一个意外的结果。当我第一次将鼠标悬停在文本上时，文本会立即跳到20px，这不是我想要的。但是，奇怪的是，在那之后，转换行为就是我想要的。有没有解释一下是什么原因导致第一个函数调用以这种方式运行？你做了什么初始状态（设为12）、鼠标移出（移动20到12）和鼠标进入（移动12到20）的类似更改？很抱歉，我不确定我是否理解初始状态的含义。我的鼠标事件如下：

。on（'mouseenter'，function（d）{text_event（d.id）；}）

我不确定您希望我更改什么。如果您知道如何修复第一次鼠标悬停时的跳跃行为，我很乐意为您提供答案。您可以尝试

d3.selectAll（）.transition（）.attr（'font-size'，'12px'）。duration（500）。transition（）.attr（'font-size'，'20px'）。duration（500）

？这产生了一个意外的结果。当我第一次将鼠标悬停在文本上时，文本会立即跳到20px，这不是我想要的。但是，奇怪的是，在那之后，转换行为就是我想要的。有没有解释一下是什么原因导致第一个函数调用以这种方式运行？你做了什么初始状态（设为12）、鼠标移出（移动20到12）和鼠标进入（移动12到20）的类似更改？很抱歉，我不确定我是否理解初始状态的含义。我的鼠标事件如下：

。on（'mouseenter'，function（d）{text_event（d.id）；}）

我不确定您想让我更改什么。如果您知道如何修复第一次鼠标悬停时的跳跃行为，我很乐意为您提供答案。有趣的是，

.attr（'font'）

不起作用，但是

.style（'font'））

可以。非常好的解决方案，谢谢！如果您首先将该值设置为属性，即

可以通过

.attr（）

访问。但是，由于它被设置为样式，因此现在只能通过

.style（）访问

。通过这种方式思考，它变得明显并且看起来是一致的。有趣的是，

.attr（'font'）

不起作用，但

.style（'font'）

起作用。非常酷的解决方案，谢谢！如果您首先将值设置为属性，即

，则

.attr（）可以访问它

。但是，因为它被设置为一种样式，所以现在只有

.style（）

才能访问它。但是，通过这种方式思考，它变得显而易见，而且似乎是一致的。

function text_event(id) {
  d3.selectAll(".data_label")
    .filter(function (d) {
      return (d.id == id);
    })
      .transition()
      .styleTween('font', function() {return d3.interpolate('12px Calibri', '20px Calibri' )
      .duration(500);
}

function text_event2(id) {
  d3.selectAll(".data_label")
    .filter(function (d) {
      return (d.id == id);
    })
      .transition()
      .styleTween('font', function() {return d3.interpolate('20px Calibri', '12px Calibri' )
      .duration(500);
}

return d3.interpolate(d3.select(this).style("font"), '20px Calibri' )