javascript - 平滑补间字体大小

Question

我有两个函数可以调整我的数据标签。第一个函数称为 .on(mouseenter,...)，第二个函数称为 .on(mouseout,...。第一个函数使数据标签字体变大，第二个应该将其返回到正常大小。两者都是通过 .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>