平滑补间字体大小

Question

我有两个补间我的数据标签的功能。 第一个称为.on(mouseenter,... ，第二个称为.on(mouseout,...第一个函数使数据标签的字体大小变大，第二个函数将其恢复为正常大小。通过.duration(500) .transition()和.duration(500) 。

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);
}

问题是，如果您以足够快的速度移入和移出鼠标，第二个功能实际上会使字体再次变大。 d3不会像现在这样以20px的方式一直开始过渡，而是有一种方法可以根据过渡中已经存在的字体大小将过渡开始恢复为正常大小？

Answer 1

初始化插值器时，必须将实际值设置为起始值，而不是使用静态最终值12px或20px 。 这可以通过使用d3.select(this).style("font")检索值来轻松完成：

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

看一下这个工作示例：

 d3.selectAll("text") .on("mouseenter", text_event) .on("mouseleave", text_event2); function text_event() { d3.selectAll(".data_label") .transition() .styleTween('font', function() { return d3.interpolate(d3.select(this).style("font"), '20px Calibri' ) }) .duration(500); } function text_event2() { d3.selectAll(".data_label") .transition() .styleTween('font', function() { return d3.interpolate(d3.select(this).style("font"), '12px Calibri' ) }) .duration(500); } 

 <script src="https://d3js.org/d3.v4.js"></script> <svg> <text x="100" y="100" class="data_label" style="font: 12px Calibri;">Test</text> </svg>