平滑補間字體大小

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>